DOM属性操作

最新推荐文章于 2024-07-29 09:13:18 发布

anhumi4350

最新推荐文章于 2024-07-29 09:13:18 发布

阅读量66

点赞数

原文链接：http://www.cnblogs.com/hy96/p/11401688.html

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div class="box" a="10" b=20 id="cont" title="这是一个div">
        <span>hello</span>
    </div>
</body>
<script>
    var obox = document.querySelector(".box");
    // 属性的操作：
    //     可见：看得见
    //         内置：系统提供，对象的操作方法；系列专属方法：get/set/remove Attribute()
                 console.log(obox.title) //这是一个div
                 obox.title = "1231321";//将title里面内容改为1231321
                console.log(obox.title) //1231321
                 console.log(obox.className)
                 obox.className = "hahah"

                 console.log(obox.getAttribute("title"))//1231321
                 console.log(obox.getAttribute("class"))//hahah

    //         非内置：自定义的，系列专属方法：get/set/remove Attribute()
                 console.log(obox.getAttribute("a")) //10
                 obox.setAttribute("a","hello")    //将10换成了hello
                 console.log(obox.getAttribute("a")) //hello
                 obox.setAttribute("c","world")    //null，但是可以在元素中看到这个属性。搞不懂
                 obox.removeAttribute("a") //删除属性a
                 console.log(obox.getAttribute("a")) //null
                // obox.removeAttribute("b")
                // obox.removeAttribute("c")

    //     不可见：看不见
    //         内置：对象的操作
                 console.log(obox.innerHTML);    //可以解析标签 // <span>hello</span>
                 console.log(obox.innerText);    //不可以解析标签 //hello

                 console.log(obox.tagName);//DIV

                 console.log(obox.style)
//                 所有的css属性
//                 obox.style.width = "300px"
//                 obox.style.height = "300px"
//                 obox.style.background = "red"
//                 obox.style.display = "none"
                 obox.style.cssText = "width:100px;height:100px;background:red;position:absolute;left:100px;"

    //         非内置：对象的操作
                // 元素本身的类型，对象
                // 对象，作为真正的对象操作
                 obox.abc = "hahahah"
                 console.log(obox.abc)
                


</script>
</html>