JavaScript操作CSS样式和DOM元素
动态获取修改dom元素
获取修改css样式
propertyName是CSS属性的驼峰命名法
1 | var value = element.style.propertyName; |
获取元素的字体大小或者修改大小示例
1 | var fontSize = element.style.fontSize; |
获取计算后的css样式
要获取一个元素的某个计算后的样式属性的值
1 | var value = window.getComputedStyle(element, pseudoElement).propertyName; |
获取元素的边框宽度示例
1 | var borderWidth = window.getComputedStyle(element).borderWidth; |
操作css类名
获取一个元素的所有类名
1 | var classNames = element.classList; |
是否包含某个类名
1 | var hasClass = element.classList.contains(className); |
添加或者删除元素的某个类名
1 | element.classList.add(className); |
切换元素的某个类名
如果存在则删除 如果不存在则添加
1 | element.classList.toggle(className); |