如何使用 Javascript 更改 CSS

既然我们可以用 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);