如何在 JavaScript 中更改元素的 css 样式?
javascriptobject oriented programmingprogramming
JavaScript 可以使用某些方法(例如 getElementById()、getElementByClassName() 等)更改元素的 Css 样式，例如颜色、字体大小等。
在以下示例中，使用 getElementById() 方法更改了元素的字体样式和字体大小。
示例 1
在以下示例中，使用样式命令"style.fontSize"和"style.fontStyle"，提供的文本将更改为"35px"的字体大小并将字体样式改为<italic>
<html>
<body>
<p id="size">JavaScript 可以更改 HTML 元素的样式。</p>
<p id="style">JavaScript 可以更改 HTML 元素的样式。</p>
<button type="button"
onclick="document.getElementById('size').style.fontSize='35px'">Size</button>
<按钮类型="按钮" onclick="document.getElementById('style')
.style.fontStyle='italic'">样式</button>
</body>
</html>
执行上述代码后，我们将在浏览器上看到以下内容。
单击上述按钮后，第一个文本将更改为不同的 字体大小 ，第二个文本将更改为不同的字体样式，如输出中所示。
输出
示例 2
在下面的例子中，使用样式命令"style.color"将文本的颜色更改为蓝色。
<html>
<body>
<p id="color">JavaScript 可以更改 HTML 元素的颜色。</p>
<button type="button" onclick="document.getElementById('color').
style.color='blue'">Color Me</button>
</body>
</html>
执行上述代码后，我们将在浏览器窗口中看到以下内容。
单击"color me"按钮后，提供的文本颜色将更改为"blue"如输出所示。
输出
