HTML5选择器，类样式

选择器：css的选择器怎么用，这里就怎么用

document.querySelector("选择器")；//只能获取一个，默认第一个

var op=document.querySelector("div p");
        op.style.backgroundColor="yellow";

document.querySelectorAll("选择器");//获取的是多个

var ap=document.querySelectorAll('div p');
        for(var i=0;i<ap.length;i++){
            ap[i].style.backgroundColor="red";
        }

document.getElementsByClassName("类样式的名字");

var oop=document.getElementsByClassName('cla')[0];//返回第一个
        oop.className="col";

//getElementsByClassName返回的是一个集合，如果为其设置样式，应该明确是哪一个元素

类样式：

function my$(btn){
            return document.getElementById(btn);//将获取元素封装成一个函数
        }
        my$("btn1").οnclick=function(){
            my$("div1").classList.add("test");//添加类样式
            //等价于my$("div1").className='test';
        }
        my$("btn2").οnclick=function(){
            my$("div1").classList.remove("test");//删除类样式
        }
        my$("btn3").οnclick=function(){
            my$("div1").classList.toggle("test");//切换类样式
        }
        my$("btn4").οnclick=function(){
            //返回的是否应用了这个类样式
            var result= my$("div1").classList.contains("test");
            console.log(result);
        }

转载于:https://www.cnblogs.com/qyuan/p/9384085.html