发布于 

JavaScript操作CSS样式和DOM元素

动态获取修改dom元素

获取修改css样式

propertyName是CSS属性的驼峰命名法

1
var value = element.style.propertyName;

获取元素的字体大小或者修改大小示例

1
2
3
var fontSize = element.style.fontSize;
//也可以这样设置
element.style.fontSize = 10px;

获取计算后的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
2
element.classList.add(className);
element.classList.remove(className);
切换元素的某个类名

如果存在则删除 如果不存在则添加

1
element.classList.toggle(className);

参考文档