html5中类选择器样式,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[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);

}