工作上經(jīng)常用到原生DOM操作溪椎,經(jīng)常要查文檔睛竣,收集起來(lái)方便查詢
style操作
element.setAttribute('style','')
element.style.backgroundColor = 'red'
element.style.cssText //用來(lái)讀寫或刪除整個(gè)style屬性
element.style.setProperty(propertyName,value) //設(shè)置css屬性
element.style.getPropertyValue(property) //獲取css屬性
element.style.removeProperty(property) //刪除css屬性
操作非內(nèi)聯(lián)樣式
//ie8
element.currentStyle[attrName]
//ie9+
window.getComputedStyle(el,null)[attrName]
window.getComputedStyle(el,null).getPropertyValue(attrName)
//偽類
window.getComputedStyle(el,':after')[attrName]
類名操作
//ie8以下
Element.className //獲取元素節(jié)點(diǎn)的類名
Element.className += ' ' + newClassName //新增一個(gè)類名
//判斷是否有某個(gè)類名
function hasClass(element,className){
return new RegExp(className,'gi').test(element.className);
}
//移除class
function removeClass(element,className){
element.className = element.className.replace(new RegExp('(^|\\b)' + className.split(' ').join('|') + '(\\b|$)', 'gi'),'');
}
//ie10
element.classList.add(className) //新增
element.classList.remove(className) //刪除
element.classList.contains(className) //是否包含
element.classList.toggle(className) //toggle class