let button = document.querySelector(".btn"); button.style.backgroundColor = "blue"; button.style.color = "white";
上面是一个简单的例子,使用JavaScript动态地设置一个按钮的背景色和文字颜色。大家可以看到,这里直接通过button.style来设置CSS属性,而不是采用CSS文件中的选择器来设置。
除了这种直接操作元素的方式,大家还可以使用CSSStyleSheet对象来动态地创建和修改CSS规则。下面是一个将CSS样式添加到网页中的例子:
let sheet = new CSSStyleSheet(); sheet.replaceSync("h1 { color: red; }"); document.adoptedStyleSheets = [sheet];
使用CSSStyleSheet对象,大家可以在JavaScript中动态地创建和修改CSS规则,实现更加灵活的样式控制。
总之,将CSS代码嵌入到JavaScript中可以帮助大家在开发中更灵活地控制网页的样式,提高用户的使用体验。