本文对javascript动态修改css的样式进行总结。

1 javascript动态修改css样式

1.1 直接设置样式

比如

element.style.height = '100px';

如果css样式的属性有"-"号则可以使用中括号的形式

element.style["color-scheme"] = 'light';

或者写成驼峰的形式

element.style.colorScheme = 'light';

1.2 设置style的属性

element.setAttribute('style', 'height: 100px !important');

1.3 使用setProperty 设置样式

element.style.setProperty('height', '300px', 'important');

1.4 设置cssText

element.style.cssText = 'height: 100px !important';
element.style.cssText += 'height: 100px !important';

1.5 使用setAttribute设置css样式

element.setAttribute('height', '100px');

这种方法只能用于设置某些css样式。

参考