Javascrip动态添加样式、动态添加class、Dom操作、获取自定义属性。 注：2022-09-05更新

添加样式

• 添加单个样式
  

div.style.display="block"

• 添加多个样式

div.style="width:100px;height:100px;"

 

添加class

• Element.setAttribute() 会覆盖已存在的class，一般适用于一个class的样式

div.setAttribute("class","active")

• Element.classList.add(token) 

div.classList.add("active");

 

移除class

• Element.removeAttribute()

div.removeAttribute("class","active");

•  Element.classList.remove(token) 

div.classList.remove('active');

 

如果存在某个class，移除该classElement.classList.toggle(token, force)

• 如果存在active，移除该class，并返回false，不存在添加active，返回true　

div.classList.toggle('active');

• toggle可以加条件，下面是屏幕宽度大于1560 才会有 active class

div.classList.toggle('active', window.innerWidth > 1560);

如果设置为false，则只会token删除，不会添加。如果设置为true，则只会添加，不会删除。

 

替换class Element.classlist.replace(oldToken, newToken)

<span class="a b c"></span>

let result = document.querySelector('span').replace("c", "z");
console.log(result);

 replace() 方法可以将列表中一个已存在的 token 替换为一个新 token。如果 token 在列表中不存在， replace() 立刻返回false ，而不会将新 token 字符串添加到列表中。

 

判断类名是否存在，存在返回true，不存在返回falseElemenet.classList.contains

div.classList.contains('active');

 

 

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

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

 

获取html属性的值

div.getAttribute('class')

 

获取html自定义属性的值

div.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'))