javascript - 改变一个类的风格

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与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-用-javascript/

Answer 3

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