JavaScript DOM 改css，选择器查询元素节点寻技术

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            p{
                color: black;
            }
        </style>
    </head>
    <body>
        <div >
            <p >我是一个段落</p>
        </div>
        <button >改颜色</button>
        <button >隐藏、出现</button>    
    </body>
    <script type="text/javascript">
        //document.getElementById(id).style.property=new style 改css
        var p1=document.getElementById("p1");
        var p2=document.getElementById("p2");
        p1.onclick=function(){
            document.getElementById('p').style.color="red"; //语法：元素.style.样式名=样式值  读取和设置的都是内联样式优先级高，除了！important设置的
        }　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　//其中样式如带-，background-color要改成驼峰式backgroundColor
        var count=1;　　　　　　　　　　　　　　　　　　　　　　　　　　//读取当前显示的样式 元素.currentStyle.元素名
        p2.onclick=function(){
            count++;
            console.log(count);
            if(count%2 == 0){
                document.getElementById('p').style.visibility="hidden";
            }else{
                document.getElementById('p').style.visibility="visible";
            }
            
        } 
        
        //document.querySelector() 选择器元素查询
        var qs=document.querySelector("#c p");//获取的是满足的第一个元素节点
        var qsa=document.querySelectorAll("#c p");//获取的所有的元素节点，一个类数组，
        
        //另外的一些查询
        var all=document.all;//获取页面中所有的元素
        console.log(all.length);
        
        var html=document.documentElement;//html跟标签
        
        var body=document.body;//body的引用
        
    </script>
</html>
本文地址：https://www.xunjs.com/htmlcss/view_11713.html
Tags：素节选择器 JavaScript 查询元素
相关推荐
