Javascrip动态添加样式，Dom操作，获取自定义属性

var layer=document.querySelector('.layer')

添加单个样式

layer.style.display="block"

 

添加多个样式

layer.style="width:100px;height:100px;background:#2ea6df;"

 

操作class：
　　setAttribute() 会覆盖已存在的class，一般适用于一个class的样式

document.getElementById('box').setAttribute("class","active")

　　setAttribute() 移除class，属性

document.getElementById('box').removeAttribute("class","active");

　　classList()不会覆盖　　

document.getElementById('box').classList.add("active");

　　移除class

document.body.classList.remove('active');

　　如果存在active，移除返回false，不存在添加active，返回true　

document.body.classList.toggle('active');

　　判断类名是否存在，存在返回true，不存在返回false

document.body.classList.contains('active');

 

　　获取style：第一个参数为节点元素，第二个元素默认为null

window.getComputedStyle(this.$refs.previewImg,null).width

 

 

获取html属性值
　　获取html属性的值
　　　　layer.getAttribute('class')
　　获取html自定义属性的值
　　　　layer.getAttribute("data-id")

getElementsByClassName的兼容写法
function getElementsByClassName(clsName,parent){
　　if (document.getElementsByClassName) {
　　　　// 使用现有方法
　　　　return document.getElementsByClassName(clsName);
　　}else{
　　　　var oParent=document.getElementById(parent)||document;
　　　　var elements=oParent.getElementsByTagName("*");
　　　　var ele=[];
　　　　for(var i=0;i<elements.length;i++){
　　　　　　if(elements[i].className==clsName){
　　　　　　　　ele.push(elements[i]);
　　　　　　}
　　　　}
　　　　　　return ele;
　　}
}
console.log(getElementsByClassName('a'))