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

　　　　var layer=document.querySelector('.layer')
添加样式：
　　添加单个样式：
　　　　layer.style.display="block"
　　添加多个样式：
　　　　layer.style="width:100px;height:100px;background:#2ea6df;"

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

 　　window.getComputedStyle(this.$refs.previewImg,null).width
操作class：
　　setAttribute()会覆盖已存在的class，一般适用于一个class的样式
　　　　document.getElementById('box').setAttribute("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');

　　

移除class，属性

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

获取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'))

转载于:https://www.cnblogs.com/naturl/p/9574820.html