我使用 jQuery 已经有一段时间了，但现在我想用纯 javascript 编写一些东西，这证明是很有挑战性的.. 目前我最大的问题之一是我还没有找到一种方法来设置/更改类的样式。这对于具有 id 的元素来说不是问题，但我想更改具有相同类的一组元素的样式，而不仅仅是具有 id 的一个元素。 在 jQuery 中我只想写：
$('.someClass').css('color','red')
在纯js中真的没有简单的等价物吗？
【问题讨论】：
标签： javascript jquery css class
试试下面的
var all = document.getElementsByClassName('someClass');
for (var i = 0; i < all.length; i++) {
all[i].style.color = 'red';
}
注意：正如 Cheery 指出的那样，getElementsByClassName 在 IE 中不起作用。链接的问题有一个很好的方法来解决这个限制
【讨论】：
您可以使用选择器库，例如 Sizzle：http://sizzlejs.com/，但如果您想要纯 JS，我猜您会被困在获取所有元素上，然后以编程方式“挑选”您有兴趣使用的类像这样的正则表达式：
这相当于您的 JQuery oneliner：
for( i in document.all) document.all[i].className && /\bpost-text\b/g.test(document.all[i].className) && (document.all[i].style.color = "red")
:)
如果您不需要在一行中使用它，您可以使其更快（更具可读性）：
var myClassName = "someClass";
var regexp = RegExp("\\b"+myClassName+"\\b/g");
var elements = document.all;
for( i in elements){
var this_element = elements[i];
if(regexp.test(this_element.className){
this_element.style.color = "red";
}
}
如果 "for(i in object)" 对你不起作用，只需使用经典的 for 循环 "for(var i = 0; i ”。
使用一些更高级的 JS 概念（数组函数映射、折叠等）可能会“美化”一点，你是哪个 JS 版本再次编码？我猜这不是 ECMA Script 5，对吧？
另外，看看这个问题/答案Get All Elements in an HTML document with a specific CSS Class
【讨论】：
你想改变的是样式表，我猜？这在 Javascript 中是可能的，请参阅
恐怕没有图书馆，我真的很想看到一个......
【讨论】：
var all = document.getElementsByClassName('someClass');
for (var i = 0; i < all.length; i++) {
all[i].className += " red";
}
为了更好的编码风格，使用上面的代码为元素添加另一个类，然后使用 CSS 更改所有元素的颜色，如下所示：
.red {
color:red;
}
【讨论】：
我发现使用 CSS 变量更容易。您可以将类设置为使用变量，然后在 Javascript 中更改该值，从而更改 CSS。
如果你将类设置为：
:root {
--some-color: red;
}
.someClass {
color: var(--some-color);
}
然后你可以用 Javascript 改变变量的值
document.documentElement.style.setProperty('--some-color', '(random color)');
(random color) 可以是任何被视为有效 CSS 颜色的东西（例如，blue、black、#626262、rgb(12, 93, 44)）
在 JS 中更新值也会自动更新页面。
当然，这可以使用任何属性来完成，而不仅仅是颜色。下面是一个改变类填充的例子：
:root {
--some-padding: 12px;
}
.someClass {
padding: var(--some-padding);
}
// Set padding to 15px
document.documentElement.style.setProperty('--some-padding', '15px');
// Set padding to 5rem
document.documentElement.style.setProperty('--some-padding', '5rem');
// Set padding to 25%
document.documentElement.style.setProperty('--some-padding', '25%');
（如何使用css属性动态设置css属性）
// set to light mode:
document.documentElement.style.setProperty('--bg-color', getComputedStyle(document.documentElement).getPropertyValue('--bg-color-light'));
// set to dark mode:
document.documentElement.style.setProperty('--bg-color', getComputedStyle(document.documentElement).getPropertyValue('--bg-color-dark'));
使用相应的 css：
:root {
--bg-color: black;
--bg-color-light: white;
--bg-color-dark: black;
body {
background-color: var(--bg-color);
}
如何声明和使用 CSS 变量：https://www.w3schools.com/css/css3_variables.asp
如何在 JS 中更新 CSS 变量：https://css-tricks.com/updating-a-css-variable-with-javascript/
【讨论】：
var sheet = document.createElement('style')
sheet.innerHTML = ".someClass {color: red;}";
document.body.appendChild(sheet);
【讨论】：