通过javascript更改整个文档的CSS值

Change CSS value by javascript for whole document

本文关键字：文档 CSS javascript 通过      更新时间：2024-05-03

我想在ajax调用中更改从CSS文件加载的值，这意味着不仅仅是一个元素，比如：

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

但类似的脚本通常会更改css值，不仅是按ID对元素，而且与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值divforchangecolor.backgroundColor=red--"

但我需要更改CSS才能到达.divforchangecolor ul li和.divforchangecolor ul li:hover

如果不能将类名应用于这些元素。您可以在页面中添加一个新的选择器。下面的普通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; }');

只要调整这背后的思想，使其防弹。

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';

使用getElementByClassName()并迭代返回的数组以实现此

您可以使用document.getElementsByClassName按类选择元素，也可以使用document.querySelectorAll()按css选择器（包括类）选择元素。

这里有两种方法，例如：在这里进行现场演示（点击）。

标记：

<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只是在操纵使用哪一个。

在整个文档中，您的方法可能有点不同：

  • ajax调用
  • 完成后调用函数
  • 有条件地在主体上设置类，如<body class='mycondition'></body>
  • CSS将负责其余.mycondition .someclass: color: red;

这种方法将比使用JavaScript在一堆元素上更改CSS更具性能。

您可以利用CSS选择器：

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

然后，使用javascript，当单击其中一个div时，将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

相关文章：