改变DOM样式的三种方式

改变DOM节点的样式

1.

<span id="test">hello world</span>

<script type="text/javascript">
    var node = document.getElementById("test");
    node.style.color="red";
</script>
<!--和下面的样式效果相同-->
<span id="test" style="color:red">hello world</span>

2.如果有多个样式需要设置呢

<style type="text/css">
.testStyle{
    color:red;
    background-color: black;
    font-size: 40px;
    font-weight: bold;
}
</style>

<span id="test">hello world</span>
<script type="text/javascript">
    var node = document.getElementById("test");
    node.className = "testStyle";
</script>

3.如果有多个DOM 呢

可以使用JS来批量处理

<span id="test">hello world</span>
<span>aaaaa</span>
<span>bbbbb</span>
<span>ccccc</span>
<script type="text/javascript">
    function addStyleNode(str) {
        var styleNode = document.createElement("style");
        styleNode.type="text/css";
        if(styleNode.styleSheet) {
            styleNode.styleSheet.cssText = str;
        } else {
            styleNode.innerHTML = str;
        }
        document.getElementByTagName("head")[0].appendChild(styleNode);
    }
    addStyleNode("span{font-size:40px;background-color:#000;color:#fff} #test{color:red}");
</script>

要注意的是，IE和ff在innerHTML上的操作是不一致的。