如何使用JavaScript动态更改样式标记？

Question

我想在生成内容后更改样式标记.如何在样式标记中添加样式？我试过用:

document.getElementById('style').appendChild(styleContents);

但它不起作用

Answer 1

您可能正在尝试将css添加到样式标记中.这可以使用以下方法完成:

document.getElementsByTagName('style')[0].innerHTML=""; //some css goes here

您还可以使用:

document.styleSheets[0].cssText = ""; //some css goes here

Answer 2

我知道这是一个古老的问题,但我一直试图找到一种方法来动态更新这些,而无需直接对元素应用样式.

如果为样式标记指定ID并选择它,则可以使用sheet属性访问其CSS.

从这里你可以更新你想要的任何东西.通过替换标记内的整个CSS或更新单个类.

document.getElementById('somestyletagid').sheet.cssRules[0].selectorText

这是您的班级选择器.

document.getElementById('somestyletagid').sheet.cssRules[0].style

这些是该类的所有单独的css属性.

您可以通过执行以下操作更新背景颜色:

document.getElementById('somestyletagid').sheet.cssRules[0].style.backgroundColor = 'red'

这是一种访问html中任何样式标记的方法.不幸的是,我找不到每个CSSStyleRule的严格唯一ID.最接近的是selectorText,但显然可以重复.无论哪种方式,至少对我的需求,这正是我所需要的.

您还可以使用document.styleSheets更新任何包含的CSS文件,并以相同的方式访问它们.

document.styleSheets[0].href

包含的css文件的href.

document.styleSheets[0].cssRules

工作表中的所有类.

希望这有助于某人!

Answer 3

style是一个属性.在你之后你getElementById()可以改变它style.

HTML:

<div id='myDiv'>...</div>

JS:

var div = document.getElementById('myDiv')

div.style.background = 'red';
div.style.margin = "10px";
div.style.fontSize = "12px";

等等

Answer 4

元素style没有子元素，因为根据定义其内容只是文本（就 HTML 而言）。但这意味着您可以使用该innerHTML属性附加到其内容。如果你的元素有<style id=foo>，那么你可以写：

document.getElementById('foo').innerHTML += styleContents;