JS学习十：DOM样式属性读写，飞翔的div示例

一、修改、增加行间样式（行间样式style，也是属性，属于属性节点）

行间样式的获取：找到元素节点后，使用 “ 元素节点.style.样式属性名 ” 获取样式属性。或者元素节点.style["样式属性名"]

行间样式的修改：找到元素节点后，使用 “元素节点.style.样式属性名 = 属性值” 修改。

    <body style="height: 3000px;">
        <button onclick="changeColor()">换颜色</button>
        <div id="box" style="width: 100px;height: 200px;background-color: red;"></div>
        
        <script type="text/javascript">
            // 先找到元素节点
            var jsDiv = document.getElementById("box")
            function changeColor () {
                console.log(jsDiv.style) //....
                console.log(jsDiv.style.backgroundColor)  //red
                // backgroundColor对应background-color
                jsDiv.style.backgroundColor = "gray";
                jsDiv.style.width = "200px";
                // 可以使用：style.css样式属性,也可以使用: style["css样式属性"]
                jsDiv.style["height"] = "150px";
            }
        </script>
    </body>

注意：获取或设置样式的属性名时，要将原来使用"-"连接单词的写法，改成驼峰写法。如background-color，改为backgroundColor.......

二、修改内部、外部样式

内部、外部样式的修改，和行间样式的修改是一样的：找到元素节点后，使用 “元素节点.style.样式属性名 = 属性值” 修改。

但是内部、外部样式，使用 “ 元素节点.style.样式属性名 ” 或者元素节点.style["样式属性名"]，获取不到样式属性及样式属性的值，只能通过以下方式才能获取：

　　IE中：元素节点.currentStyle.样式属性名，或者：元素节点.currentStyle["样式属性名”]

　　其它浏览器：window.getComputedStyle(元素节点，伪类).样式属性名，或者：window.getComuptedStyle(元素节点，伪类)["样式属性名"]。其中的伪类，一般写null即可。

设置内部、外部样式：仍然使用元素节点.style.属性名 = “值”，或者 元素节点.style["属性名"] = “值”

内部样式：

<!DOCTYPE HTML>    
<html>
    <head>
        <meta charset="utf-8" />
        <style type="text/css">
            #box {
                width: 100px;
                height: 200px;
                background-color: red;
                position: relative;
            }
        </style>
    </head>
    <body style="height: 3000px;">
        <button onclick="changeColor()">换颜色</button>
        <div id="box"></div>
        <script type="text/javascript">
            // 先找到元素节点
            var jsDiv = document.getElementById("box")
            // 注意:获取内,外部样式,和获取行间样式的语法不一样
            console.log(jsDiv.style.backgroundColor)  //获取失败
            // backgroundColor对应background-color
            console.log(window.getComputedStyle(jsDiv, null).backgroundColor) // rgb(255, 0, 0)
            function changeColor () {
                // 设置内,外部样式,和设置行间样式的语法一样
                jsDiv.style.backgroundColor = "gray";
                jsDiv.style.width = "200px";
                // 可以使用：style.css样式属性,也可以使用: style["css样式属性"]
                jsDiv.style["height"] = "150px";
            }
        </script>
    </body>
</html>

外部样式：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" type="text/css" href="css/test.css"/>
    </head>
    <body style="height: 3000px;">
        <button onclick="changeColor()">换颜色</button>
        <div id="box"></div>
        
        <script type="text/javascript">
            var jsDiv = document.getElementById("box")
            function changeColor () {
                console.log(jsDiv.style.backgroundColor) //获取失败
                console.log(window.getComputedStyle(jsDiv, null).backgroundColor)  //rgb(0, 128, 0)
                jsDiv.style.backgroundColor = "gray";
                jsDiv.style.width = "200px";
                jsDiv.style["height"] = "150px";
            }
        </script>
    </body>
</html>

css/test.css

#box {
    width: 100px;
    height: 120px;
    background-color: #008000;
}

行间样式，也可以使用window.getComputedStyle(元素节点，伪类).样式属性名，去获取样式。

三、飞翔的div.....

示例：

<!DOCTYPE HTML>    
<html>
    <head>
        <meta charset="utf-8" />
        <style type="text/css">
            #box {
                width: 100px;
                height: 100px;
                background-color: red;
                text-align: center;
                line-height: 100px;
                position: absolute;
                left: 0;
                top: 0;
            }
        </style>
    </head>
    <body style="height: 3000px;">
        <div id="box">飞翔的div</div>
        <!-- 为了按钮与浮动块重合的时侯，也可以点击按钮，即让按钮在顶层：给按钮设置样式 -->
        <button onclick="fly()" style="position: absolute;left: 200px;top: 200px;">start...</button>
        
        <script type="text/javascript">
            var dv = document.getElementById("box");
            function fly(){
                setInterval(function(){
                    console.log(dv.offsetLeft, dv.offsetTop);
                    var width = parseInt(window.getComputedStyle(dv, null).left);
                    if (width > 1000) {
                        width = 10
                    } else {
                        width += 10
                    }
                    dv.style.left = width + "px"
                    
                    var height = parseInt(window.getComputedStyle(dv, null).top);
                    if (height > 1000) {
                        height = 10
                    } else {
                        height += 10
                    }
                    dv.style.top = height + "px"
                }, 300)
            }
        </script>
    </body>
</html>

总结：

修改、增加所有样式的属性：元素节点.style.样式属性名 = 值

获取行间样式的属性的值：元素节点.style.样式属性名，或 window.getComputedStyle(元素节点， null).样式属性名或 ["样式属性名"]

获取所有样式的属性的值：window.getComputedStyle(元素节点， null).样式属性名或 ["样式属性名"]

在CSS中属性名使用"-"连接单词的写法，要改成驼峰写法。如background-color，改为backgroundColor.......

posted on 2018-11-18 21:31 myworldworld 阅读(144) 评论(0) 收藏举报

刷新页面返回顶部

myworldworld