属性操作

<!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"))
                 obox.setAttribute("a","hello")
                 console.log(obox.getAttribute("a"))
                 obox.setAttribute("c","world")
                 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>

 

上一篇:关于元素尺寸问题的汇总


下一篇:键盘事件、在网页上实现物品移动、阻止默认事件与替换