1. 在 HTML 页面中引入 CSS 样式文件。
“`html
<link rel=”stylesheet” type=”text/css” href=”style.css”>
“`
2. 在 JavaScript 代码中,使用 `document.styleSheets` 对象来获取当前页面的 CSS 样式表文件,并将其添加到 `style` 标签中。
“`javascript
const sheet = document.styleSheets[1]; // 1 表示当前页面的 CSS 样式表文件
const css = `
body {
font-size: 16px;
`;
sheet.addRule(css);
“`
在上面的代码中,`sheet` 对象表示当前的 CSS 样式表文件,`css` 字符串表示要添加的 CSS 规则。
3. 将 CSS 规则应用到页面的样式中。
“`javascript
sheet.addRule(
`
h1 {
font-size: 24px;
}
`
);
“`
在上面的代码中,大家使用 `addRule` 方法将一个规则应用到 H1 元素的样式中。
4. 在需要设置 CSS 样式的 JavaScript 代码中,使用 `style` 标签来引用已经设置好的 CSS 样式。
“`javascript
const button = document.getElementById(‘myButton’);
button.style.fontName = ‘Arial’;
“`
在上面的代码中,大家使用 `style` 标签来设置按钮的字体样式。
通过以上步骤,大家可以在 JavaScript 中设置 CSS 样式。需要注意的是,在实际应用中,应该避免频繁地更改 CSS 样式,因为这样可能会影响页面的性能。