Изменения значение CSS на JavaScript для всего документа

Я хочу на Ajax вызова изменить значение, загруженное из файла CSS, то это означает не только для одного элемента, как:Изменения значение CSS на JavaScript для всего документа

document.getElementById("something").style.backgroundColor="<?php echo "red"; ?>";

но аналогичный сценарий, который изменит значение CSS как правило, не только для элемента по идентификатору, Idealy как цвет фона для CSS CLASS divforchangecolor:

CSS:

.divforchangecolor{ 
display: block; 
margin: 20px 0px 0px 0px; 
padding: 0px; 
background-color: blue; 
}

HTML:

<div class="divforchangecolor"><ul><li>something i want to style</li><ul></div> 
<div class="divforchangecolor">not important</div> 
<div class="divforchangecolor"><ul><li>something i want to style</li><ul></div> 
<div class="divforchangecolor">not improtant</div>

Идеальное решение для меня:

OnClick = "значение CSS --change divforchangecolor.backgroundColor = red--"

, но мне нужно изменить CSS, чтобы достичь .divforchangecolor ул Ли и .divforchangecolor ул ли: парить

источник

2013-12-06 Martin

Вы можете использовать '.getElementsByClassName' целевой все с классом' divfor changecolor' См. здесь для получения дополнительной информации о том, как его использовать: https://developer.mozilla.org/en-US/docs/Web/API/document.getElementsByClassName –

Я думаю, что вы ищете '.getElementsByClassName' – Morpheus

Если вы не можете просто применить к имени класса этих элементов. Вы можете добавить новый селектор на свою страницу. Следующий ванильный JS мог бы это сделать (jsFiddle).

function applyDynamicStyle(css) { 
    var styleTag = document.createElement('style'); 
    var dynamicStyleCss = document.createTextNode(css); 
    styleTag.appendChild(dynamicStyleCss); 
    var header = document.getElementsByTagName('head')[0]; 
    header.appendChild(styleTag);  
}; 

applyDynamicStyle('.divforchangecolor { color: pink; }');

Просто приспособите мысль за этим и сделайте ее пуленепробиваемой.

источник

2013-12-06 18:02:20 scottheckel

Я использовал этот подход раньше и нашел, что он значительно быстрее, чем цикл по элементам, когда есть много элементов для изменения. – jrullmann

спасибо, скорость - это, конечно, еще одна часть истории, и это также решило обе проблемы. – Martin

var e = document.getElementsByClassName('divforchangecolor'); 
for (var i = 0; i < e.length; i++) e[i].style.backgroundColor = 'red';

Используйте getElementByClassName() и перебрать массив возвращается, чтобы достичь этого

источник

2013-12-06 17:55:11

var elements=document.getElementsByClassName("divforchangecolor"); 
for(var i=0;i<elements.length;i++){ 
    elements[i].style.backgroundColor="red"; 
}

источник

2013-12-06 17:55:15 scrblnrd3

Получил меня на 4 секунды haha –

@RUJordan Я, как правило, теряю конец – scrblnrd3

Вы можете выбрать элементы по классам с помощью document.getElementsByClassName или css селектором (включая класс) с document.querySelectorAll().

Вот два подхода, например: Live demo here (click).

Markup:

<div class="divforchangecolor"></div> 
<div class="divforchangecolor"></div> 
<div class="divforchangecolor"></div> 
<div class="divforchangecolor"></div> 

<div class="some-container"> 
    <div></div> 
    <div></div> 
    <div></div> 
    <div></div> 
</div>

JavaScript:

var toChange = document.getElementsByClassName('divforchangecolor'); 

for (var i=0; i<toChange.length; ++i) { 
    toChange[i].style.backgroundColor = 'green'; 
} 

var toChange2 = document.querySelectorAll('.some-container > div'); 

for (var i=0; i<toChange.length; ++i) { 
    toChange2[i].style.backgroundColor = 'red'; 
}

Я рекомендую второе решение, если это возможно в вашем если разметка намного чище. Вам не нужно специально обертывать элементы в родительском - у элементов уже есть родительский элемент (например, тело).

Другой вариант - иметь цвет фона, который вы хотите изменить, в класс css, тогда вы можете изменить класс на своих элементах (и, следовательно, изменить стиль), вместо того, чтобы напрямую изменять css. Это также хорошая практика, поскольку она позволяет сохранять ваши стили в файлах css, в то время как js просто манипулирует тем, какой из них используется.

источник

2013-12-06 18:05:15 m59

В целом документ ваш подход может быть несколько иначе:

Ajax вызова
вызова функции, когда делается
условно установить класс на теле, как <body class='mycondition'></body>
CSS будет принимать уход за детьми .mycondition .someclass: color: red;

Этот подход будет более результативным используя JavaScript для изменения CSS на кучу элементов.

источник

2013-12-06 18:05:33

Вы можете использовать CSS селекторы для этого:

.forchangecolor { 
    display: block; 
    margin: 20px 0px 0px 0px; 
    padding: 0px; 
    background-color: blue; 
} 

.red-divs .forchangecolor { 
    background-color: red; 
}

Затем с JavaScript, добавьте red-divs класс родительского элемента (может быть <body>, например), когда один из дивы щелкают:

document.addEventListener("click", function(event) { 
    var target = event.target; 
    var isDiv = target.className.indexOf("forchangecolor") >= 0; 

    if(isDiv) { 
    document.body.classList.add("red-divs"); 
    } 
});

Рабочий пример: http://jsbin.com/oMIjASI/1/edit

источник

2013-12-06 18:06:03

Изменения значение CSS на JavaScript для всего документа

ответ

Смежные вопросы