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