如何改变一类的风格不JQuery的

问题描述：

假设有一个网页约2000元喜欢如何改变一类的风格不JQuery的

<div class="good">fruit</div> 
<div class="bad">stone</div> 
<div class="bad">sand</div> 
<div class="good">water</div> 
<div class="good">carrot</div>

和风格是

.good { color: green } 
.bad { color: red }

我想改变的类的CSS“颜色”值没有迭代getElementsByClassName的“好”和“坏”。例如。像（发明）

document.class["good"].style.color="yellow"

我没有发现任何方式改变类的定义为了让标有该类变化样式的所有标签：做它的存在？可能吗？

强制：我{不想，不能}使用jQuery。

编辑：我需要通过Javascript功能来做到这一点，或找到一种方法来改变整个类的属性，使整个页面是由在同一时间（我重复变化影响，不重复过的文件。 getElementsByClassName方法（ “好”））。我的意思是，我不想使用getElementsByClassName。我希望那个样式元素的“颜色”改为类“好”，以便“好”类具有颜色“黄色”而不是“绿色”。我不想改变那个类的文档元素的风格，我想改变类的风格。可能吗？谢谢

关于您的编辑：““我不想改变与该类别的文档元素的风格，我想改变类的风格。”'：有可能，但是这会导致不可预知的软件/ html设计。它发生在我身上，你想实现一些主题/主题切换。如果是这种情况，我建议创建另一个样式表，其中所有变量样式都是这样。在更改样式表的样式时，更改样式表，只更改DOM中的样式表，而不是单个样式。 –

谢谢，但事实并非如此。我正在使用GreaseMonkey来访问一个非常复杂的页面（原文如此！），其中大约5000个元素的结构与我的示例中的结构相同。我不能使用jQuery的原因太长，以解释，通过getElementsByClassName更改元素属性*真的很慢，但Nenad建议的技巧是完美的：立即行动，无需等待脚本运行3-4秒。 – Sampisa

答

您可以使用getElementsByClassName()但你一定要循环的HTMLCollection DEMO

var good = document.getElementsByClassName('good'); 
for (var i = 0; i < good.length; i++) { 
    good[i].style.color = 'yellow'; 
}

更新：您可以更改CSS class与Document.styleSheets，这是怎么样。注意：你需要找到你的CSS文件的正确的号码，在这个演示其[0]

var changeStyle = function(selector, prop, value) { 
 
    var style = document.styleSheets[0].cssRules || document.styleSheets[0].rules; 
 
    for (var i = 0; i < style.length; i++) { 
 
    if (style[i].selectorText == selector) { 
 
     style[i].style[prop] = value; 
 
    } 
 
    } 
 
} 
 

 
changeStyle('.good', 'color', 'purple'); 
 
changeStyle('.bad', 'color', 'yellow');

.good { color: green } 
 
.bad { color: red }

<div class="good">fruit</div> 
 
<div class="bad">stone</div> 
 
<div class="bad">sand</div> 
 
<div class="good">water</div> 
 
<div class="good">carrot</div>

然后你可以做同样的事情坏https://jsfiddle.net/Lg0wyt9u/701/ –

也许我不清楚：“我想改变CSS类”好“和”坏“的值，没有迭代getElementsByClassName。“ – Sampisa

我知道......但最终我无法理解，我想改变班级定义，而不是改变班级的属性 – Sampisa

答

我想这是你想要的

elements = document.getElementsByClassName("god"); 
for(i=0; i<elements.length; i++) { 
    elements[i].className += " bad"; 
}

答

使用CSS选择是另一种重要的方式。

访问此链接http://www.w3schools.com/cssref/css_selectors.asp

如何改变一类的风格不JQuery的

相关推荐