3-31操作属性元素内容及定时器

Posted 2020-09-08 瀚城老爷子

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了3-31操作属性元素内容及定时器相关的知识，希望对你有一定的参考价值。

一、操作属性：

（1）添加属性：对象.setAttribute（“属性名”，“属性值”）；--设置一个属性，添加或更改

注：若要添加属性已存在则会覆盖该属性，达到修改目的

（2）获取属性：对象.getAttribute(“属性名”);---获取属性值，若无该属性则返回null

（3）移除属性：对象.removeAttribute（“属性名”）；---移除一个属性

例：

 <style type="text/css">
        
        #div1 {
            width:100px;
            height:100px;
            background-color:red;
        }
    </style>
</head>
<body>
    
        <div id="div1" style="font-size:10px; ">这是内容</div>
    
</body>
</html>
<script type="text/javascript">
    var nav1 = document.getElementById("div1");
    nav1.onclick = function () {
        nav1.removeAttribute("style");
        nav1.setAttribute("style", "color:white");
        alert(nav1.getAttribute("style"));
    }
</script>

二、操作内容

1、赋值添加操作：（1）、普通元素.innerText="值"；---以文本形式执行，不会执行其中代码；

（2）、普通元素.innerHTML=“值”；---可识别编程语句，并执行其中代码

（3）表单元素：表单元素.value="值" 或直接添加属性（setAttribute）

2、取值：（1）变量名=普通元素.innerText；----以文本形式取出其中所有文本代码

（2）变量名=普通元素.innerHTML；---只取出其中文本，不会代码

（3）表单元素：变量名=表单元素.value

例：

 <style type="text/css">
        #div1 {
            width: 200px;
            height: 200px;
            background-color: blue;
        }

        .div2 {
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div id="div1"></div>
</body>
</html>
<script>
    var nav1 = document.getElementById("div1");
    nav1.onclick = function () {
        this.innerHTML = "<div class=\'div2\'>这是内容</div>";

    }
    nav1.onmouseover = function () {
        this.innerText = "<span>这也是内容</span>";
    }
</script>