Выделенный фон текста и передний план - Как изменить?

Исходный стиль в вашем div 'xx' может вызывать некоторые проблемы ...

Объяснение

Допустим, у вас есть правило таблицы стилей, настроенное для создания вашего div s изначально скрыт. Что-то вроде:

div { display: none }

(... где, конечно, селектор ( div ), вероятно, будет немного менее широким)

Кажется, это работает правильно, поскольку страница будет загружаться с все ваши элементы div скрыты («свернуты»). Однако фактического значения свойства style.display для самих элементов нет - они просто наследуют значение из таблицы стилей. Итак, в вашем коде тест, который вы используете, чтобы проверить, скрыт ли элемент:

if(e.style.display=="none"){

... завершится ошибкой, неправильно идентифицируя цель как видимую и вызывая стиль .Свойство display должно быть установлено в значение «none» (которое не имеет видимого эффекта, поскольку элемент уже был скрыт таблицей стилей). Затем в следующий раз, когда будет нажата кнопка, значение, которое вы установили в последний раз, приведет к успешному выполнению текста, и ваша процедура установит style.display на «блокировать».

простой способ исправить это - просто отменить ваш тест и проверить наличие «блока»:

  if(e.style.display=="block"){
    e.style.display="none"
  } else {
    e.style.display="block"
  }

... однако это развалится, если у вас есть некоторые элементы, настроенные так, чтобы они были изначально visible: вы просто столкнетесь с той же проблемой в обратном порядке, когда первое нажатие кнопки не окажет какого-либо видимого эффекта. Для более надежного поведения вам необходимо протестировать стиль, который фактически активен для элемента:

function getStyle(el, name)
{
  // the way of the DOM
  if ( document.defaultView && document.defaultView.getComputedStyle )
  {
    var style = document.defaultView.getComputedStyle(el, null);
    if ( style )
      return style[name];
  }
  // IE-specific
  else if ( el.currentStyle )
    return el.currentStyle[name];

  return null;
}

function toggleDiv(a){
  var e=document.getElementById(a);
  if(!e)return true;
  if(getStyle(e, "display") == "none"){
    e.style.display="block"
  } else {
    e.style.display="none"
  }
  return true;
}

Здесь мы используем вспомогательную функцию, getStyle () , чтобы получить активное значение в перекрестном виде. платформенная манера. См. Также: getComputedStyle () , currentStyle

Что-то вроде этого может сработать для вас. Но поместите это в начало документа. функция загрузки окна важна, потому что DOM необходимо загрузить, прежде чем вы сможете возиться с полем ввода

<input id="divOpener" rel="xx" type="button" class="button" value="click here to expand/collapse"/>

и это

window.onload = function(){
            //  get input field from html
            var myInput = document.getElementById('divOpener');
            // add onclick handler
            myInput.onclick = function(){
               // if you really need to say which div in the document body, you can
               // add it to the rel or ref etc. attributes then get the value with
               // get attribute
               var myDiv = document.getElementById(this.getAttribute('rel'));
               if(!myDiv) return;
               if(myDiv.style.display=="none"){
                  myDiv.style.display="block";
               } else {
                 myDiv.style.display="none";
               }
            }
        }