html - Change CSS value by javascript for whole document - Stack Overflow

admin管理员组

文章数量:1332881

I want on ajax call change the values loaded from CSS file, it means not only for one element like:

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

but similar script which is change the css value generally, not only for element by ID, idealy like background color for 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>

Ideal solution for me:

onclick="--change CSS value divforchangecolor.backgroundColor=red--"

but i need to change CSS to reach .divforchangecolor ul li and .divforchangecolor ul li:hover

I want on ajax call change the values loaded from CSS file, it means not only for one element like:

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

but similar script which is change the css value generally, not only for element by ID, idealy like background color for 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>

Ideal solution for me:

onclick="--change CSS value divforchangecolor.backgroundColor=red--"

but i need to change CSS to reach .divforchangecolor ul li and .divforchangecolor ul li:hover

• javascript
• html
• css

Share Improve this question Follow edited Dec 7, 2013 at 0:30 Martin asked Dec 6, 2013 at 17:50 MartinMartin 2,68366 gold badges3333 silver badges5555 bronze badges 2

• 1 You can use .getElementsByClassName to target everything with the class divforchangecolor See here for more info on how to use it: developer.mozilla/en-US/docs/Web/API/… – Dryden Long Commented Dec 6, 2013 at 17:53
• 1 I think you are looking for .getElementsByClassName – Morpheus Commented Dec 6, 2013 at 17:53

Add a ment  | 

6 Answers 6

Sorted by: Reset to default 3

If you can't just apply the classname to these elements. You could add a new selector to your page. The following vanilla JS would be able to do that (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; }');

Just adapt the thought behind this and make it bullet proof.

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

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

Use getElementByClassName() and iterate over the array returned to achieve this

You can select elements by class with document.getElementsByClassName or by css selector (includes class) with document.querySelectorAll().

Here are two approaches, for example: 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';
}

I remend the second solution if it is possible in your case, as the markup is much cleaner. You don't need to specifically wrap the elements in a parent - elements already have a parent (the body, for example).

Another option is to have the background color you want to change to in a css class, then you can change the class on your elements (and therefore the style changes), rather than changing the css directly. That is also good practice, as it lets you keep your styles all in css files, while js is just manipulating which one is used.

On the whole document your approach can be a bit different:

• ajax call
• call a function when done
• conditionally set a class on the body like <body class='mycondition'></body>
• CSS will take care of the rest .mycondition .someclass: color: red;

This approach will be more performant than using JavaScript to change CSS on a bunch of elements.

You can leverage CSS selectors for that:

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

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

Then, with javascript, add the red-divs class to a parent element (could be the <body>, for example), when one of the divs is clicked:

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

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

Working example: http://jsbin./oMIjASI/1/edit

本文标签： htmlChange CSS value by javascript for whole documentStack Overflow