Изменение стиля всего класса CSS с помощью javascript

Есть ли способ изменить атрибут класса CSS с помощью javascript?

<style type="text/css">
  .fool select {
    display: block;
  }
</style>

<p class="fool">
  <select id="a" onchange="changeCSS()"> ... </select>
  <select id="b" > ... </select>
  <select id="c" > ... </select>
</p>

Я хочу изменить отображение: блок для отображения: none для ВСЕХ <select> элементов после функции вызова пользователя changeCSS().

Это выглядит просто, но я не могу найти способ сделать это...

Ответ 1

Ключ должен определить дополнительные правила для дополнительных классов и добавить эти классы к элементам, а не переписывать правила для данного правила стиля.

function changeCSS() {
  var selects = document.getElementsByTagName("select");
  for(var i =0, il = selects.length;i<il;i++){
     selects[i].className += " hidden";
  }
}

CSS

.fool select.hidden, select.hidden {
   display: none;
}

Или для действительно эффективного метода (но которому может понадобиться еще несколько специальных правил стиля)

function changeCSS() {
  document.getElementsByTagName("body")[0].className += " hideAllSelects"
}

CSS

body.hideAllSelects select {
   display: none;
}

Ответ 2

Я получаю доступ к классам CSS напрямую, чтобы одновременно настроить высоту кучи div. Вот как я это делаю:

function cssrules(){
  var rules={}; var ds=document.styleSheets,dsl=ds.length;
  for (var i=0;i<dsl;++i){
    var dsi=ds[i].cssRules,dsil=dsi.length;
    for (var j=0;j<dsil;++j) rules[dsi[j].selectorText]=dsi[j];
  }
  return rules;
};
function css_getclass(name,createifnotfound){
  var rules=cssrules();
  if (!rules.hasOwnProperty(name)) throw 'todo:deal_with_notfound_case';
  return rules[name];
};

а затем вы можете сделать что-то вроде css_getclass('.classname').style.background="blue". Я только пробовал это на хром для Windows, удачи в других браузерах.

Ответ 3

Вы можете изменять правила стиля, но обычно это не лучшее дизайнерское решение.

Чтобы получить доступ к правилам стиля, определенным таблицами стилей, вы получаете доступ к коллекции document.styleSheets. Каждая запись в этой коллекции будет иметь свойство, называемое cssRules или rules, в зависимости от браузера. Каждый из них будет CSSRule. Вы можете изменить правило, изменив его свойство cssText.

Но опять же, это, вероятно, не лучший способ решить проблему. Но это буквальный ответ на ваш вопрос.

Лучший способ решить проблему - это, вероятно, иметь еще один класс в вашей таблице стилей, который отменяет настройки предыдущего правила, а затем добавлять этот класс либо к элементам select, либо к их контейнеру. Так, например, у вас могут быть правила:

.fool select {
    display: block;
}
.fool.bar select {
    display: none;
}

... и если вы хотите скрыть выбранные объекты, добавьте класс "bar" в контейнер с классом "fool".

Альтернативно, применяйте информацию стиля CSS непосредственно к элементам.

Ответ 4

Чтобы получить тот же эффект, вы можете создать другой стиль:

<style type="text/css">
  .fool select {
    display: block;
  }
  .foolnone select {
    display: none;
  }
</style>

и измените класс <p> на foolnone.

В противном случае вам придется пройти через каждый из дочерних элементов <p> и изменить класс. Если вы так захотите, вероятно, лучше всего использовать какую-либо библиотеку, например jquery. С его помощью вы можете сделать что-то вроде:

<style>
.fool select.displaynone {
   display: none
}

$('.fool>select').toggleClass('displaynone')

См. этот jsfiddle для рабочего примера:

http://jsfiddle.net/3ujau/1/

Здесь показаны оба вышеуказанных подхода (т.е. скрытие целого <p> и скрытие каждого из <select> s.

Ответ 5

Вот как бы я это сделал:

//Broken up into multiple lines for your convenience
setTimeout
(
  function()
  {
    document.getElementById('style').innerHTML = 'p.myclass{display: none}';
  }, 5000
);

<!--Should this be separated into "<head>"?-->
<style id="style"></style>

<p>After 5 seconds:</p>
<p>This text won't be hidden,</p>
<p class="myclass">But this will,</p>
<p class="myclass">And so will this.</p>

<script>
	style = document.getElementById('style');
	setTimeout(function(){style.innerHTML = 'p.myclass{display: none}'}, 5000);
</script>

Ответ 6

 for(var elements = document.getElementsByTagName('select'), i = elements.length; i--)
     elements[i].style.display = "none";