Question

我已经使用jQuery了一段时间，但现在我想用纯JavaScript编写一些东西，这是有挑战性的... 目前我最大的问题之一是我没有找到一种方法来设置/改变一个类的样式。对于具有id的元素，这不是问题，但我想更改具有相同类的一组元素的样式，而不仅仅是对于具有id的一个元素。在jQuery中我会写：

$('.someClass').css('color','red')

在纯粹的js中真的没有简单的等价吗？

Answer 1

尝试以下

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

注意：正如Cheery所指出的，getElementsByClassName在IE中不起作用。链接的问题有一个很好的方法来解决这个限制

javascript document.getElementsByClassName compatibility with IE

Answer 2

我发现使用 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 中的值也会自动更新页面。

当然，这可以通过任何属性来完成，而不仅仅是颜色。这是一个更改类填充的示例：

CSS

:root {
    --some-padding: 12px;
}

.someClass {
    padding: var(--some-padding);
}

Javascript

// Set padding to 15px
document.documentElement.style.setProperty('--some-color', '15px');

// Set padding to 5rem
document.documentElement.style.setProperty('--some-color', '5rem');

// Set padding to 25%
document.documentElement.style.setProperty('--some-color', '25%');

来源

如何声明和使用 CSS 变量：https://www.w3schools.com/css/css3_variables.asp
如何在 JS 中更新 CSS 变量：https://css-tricks.com/updating-a-css-variable-with-javascript/

Answer 3

var sheet = document.createElement('style')
sheet.innerHTML = ".someClass {color: red;}";
document.body.appendChild(sheet);

Answer 4

var all = document.getElementsByClassName('someClass');
for (var i = 0; i < all.length; i++) {
  all[i].className += " red"; 
}

为了更好的编码风格，使用上面的代码为元素添加另一个类，然后使用CSS更改所有元素的颜色，如下所示：

.red {
  color:red;
}

Answer 5

你可以使用选择器库，例如Sizzle：http://sizzlejs.com/但是如果你想要纯粹的JS，我想你已经坚持获取所有元素，然后以编程方式“精选”那些你感兴趣的类像这样使用RegEx：

这相当于您的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＆lt; elements.length; i ++ ）”。

使用一些稍微高级的JS概念（数组函数映射，折叠等等）可能会'美化'，JS版本就是你编码再次？我想这不是ECMA Script 5，对吧？

另外，请查看此问题/答案Get All Elements in an HTML document with a specific CSS Class

Answer 6

我想要改变的是样式表，我想？这可能在Javascript中，见

Quirksmode: Change CSS
Totally Pwn CSS with Javascript（in Internet Archive）
Is the only way to change a style to do it per-element in JavaScript?（可能重复）

我担心没有图书馆，我真的很希望看到一个...

javascript - 改变一个类的风格

6 个答案:

CSS

Javascript

来源