我正在学习使用 JavaScript 来使 CSS 更具动态性,但出于某种原因,此处的代码无效。我正在 Visual Studio 内部开发,IntelliSense甚至没有向我展示insertRule方法。作为基础,我使用此文档进行学习:
https://davidwalsh.name/add-rules-stylesheets
https://www.w3.org/wiki/Dynamic_style_-_manipulating_CSS_with_JavaScript
我做的和写在那里一样但不知何故我不能在对象上使用该函数。
window.onload = function() {
var bar = newSheet();
bar.insertRule("header { float: left; opacity: 0.8; }", 1);
};
function newSheet() {
// Create the <style> tag
var style = document.createElement("style");
//WebKit Hack
style.appendChild(document.createTextNode(""));
// Add the <style> element to the page
document.head.appendChild(style);
return style.sheet;
};
答案 0 :(得分:4)
元素style
的工作方式与任何其他DOM标记一样,因此,您可以使用innerHTML向其添加样式,因为您已经从javascript创建了元素,您只需要修改其值:< / p>
window.onload = function() {
var bar = newSheet();
bar.insertRule("header { float: left; opacity: 0.8; }", 1);
};
function newSheet() {
// Create the <style> tag
var style = document.createElement("style");
style.innerHTML="p{color:red;}";
style.innerHTML+="h1{color:green;}";
//WebKit Hack
style.appendChild(document.createTextNode(""));
// Add the <style> element to the page
document.head.appendChild(style);
return style.sheet;
};