JS修改CSS

来源:互联网 发布:java调用mondodb的sum 编辑:程序博客网 时间:2024/06/07 05:23

JS修改CSS

jQuery可以方便地修改CSS, 如果不用jQuery,JS可以通过以下方法改变元素的CSS。

方法1

直接改变class名,这种方法适用于已经有定义好的class,如果没有class,则需要先创建class。

Example:

var div = document.createElement("div"); div.className = "class-name";

方法2

通过style属性直接改变样式。

Example:

var div = document.createElement("div");div.style.width = "400px";

style属性可以参考:
http://www.w3school.com.cn/jsref/dom_obj_style.asp

方法3

通过设置 stylecssText 属性来改变

cssText 属性

它是一组样式属性及其值的文本表示。这个文本格式化为一个 CSS 样式表,去掉了包围属性和值的元素选择器的花括号。

将这一属性设置为非法的值将会抛出一个代码为 SYNTAX_ERR 的 DOMException 异常。当 CSS2Properties 对象是只读的时候,试图设置这一属性将会抛出一个代码为 NO_MODIFICATION_ALLOWED_ERR 的 DOMException 异常。

Example:

var div = document.createElement("div");div.style.cssText = 'cssText = "width: 400px; height: 90px;"'
0 0