如何在 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"如输出所示。