如何使用 Javascript 更改 CSS

Posted on by

既然我们可以用 Javascript 选择 HTML 元素，我们也可以直接改变它的 CSS 样式。我们可以将其与其他 Javascript 函数结合起来，根据用户的交互改变用户对网站的体验。

使用 Javascript 更改 CSS#

在基本层面上，我们可以使用属性访问元素 CSS style。让我们看一下如何更改 ID 为my-id的元素的颜色：

// First lets select the element and put it in a variable..
let getElement = document.getElementById('my-id');

// Next lets access the style property of the element, and set its 'color' to 'red'
getElement.style.color = 'red';

如您所料，我们还可以使用事件更改样式。当您单击 ID 为“css-button”的按钮时，以下代码会将一段文本设置为红色：

// First lets select the element and put it in a variable..
let getElement = document.getElementById('my-id');
// Let's get the button as well
let theButton = document.getElementById('css-button');

theButton.addEventListener('click', function(e) {
    getElement.style.color = 'red';
});

点击这个！当您单击按钮时，这将变为红色

样式如何在 Javascript 中工作？#

对于简单的单字样式，我们可以使用该特定样式名称更改样式。例如，以下作品：

// First lets select the element and put it in a variable..
let getElement = document.getElementById('my-id');

getElement.style.color = 'red';
getElement.style.width = '500px';
getElement.style.height = '500px';
getElement.style.padding = '0 0 0 10px';

但是，由于在 Javascript 中选择样式时我们不能使用破折号，因此我们遇到了类似letter-spacing. 在这些情况下，我们切换到驼峰案例。例如，我们可以letter-spacing使用以下代码在 Javascript 中进行更改：

getElement.style.letterSpacing = 'red';

同样，background-image看起来像这样：

getElement.style.backgroundImage = 'url(./image.png)';

使用 Javascript 设置 CSS 变量#

我们可以更深入一层，使用 Javascript 设置 CSS 变量。我们必须使用稍微复杂一点的 Javascript 字符串，但它看起来像这样：

:root {
    --my-background-color: red;
    --my-text-color: white;
}

document.documentElement.style.setProperty('--my-background-color', 'red');
document.documentElement.style.setProperty('--my-text-color', 'white');

我们还可以使用以下代码检索变量值：

document.documentElement.style.getProperty('--my-background-color');

将样式插入样式表#

有时我们想添加 CSS 但我们没有要附加它的元素。如果我们想在这种情况下添加一些 CSS，我们必须使用该cssRule函数。这将以编程方式在 CSS 样式表文件的某个点添加整个 CSS 规则。

// This line gets our first stylesheet file
let style = window.document.styleSheets[0];
// Then we insert our rule. In this case, our rule is p { color: black; }
style.insertRule('p { color: black; }');

上面将在 document 的末尾添加我们的规则，但我们也可以通过设置其索引将其插入到特定规则之后：

// Will insert a rule after our 15th CSS statement block
style.insertRule('p { color: black; }', 15);

// This will insert a rule at the end of our CSS stylesheet, since sheet.cssRules.length is the total
// length of CSS rules in our document.
style.insertRule('p { color: black; }', sheet.cssRules.length);

推荐阅读：