[原]读-DOM编程艺术7-CSSDOM

结构层 表示层 行为层-网页就是由着三层信息构成的一个共同体

结构层-标签

表示层-CSS

行为层-JS和DOM

style对象,JS通过改变style属性的值来改变元素的显示方式,主要语法为

element.style.property

例如color,width等,如果在style中有如像 font-family一律采用驼峰命名法fontFamily。如何设置一个样式的值,我们可以通过element.style.property=value来进行设置例如

p.style.color="red";

style属性来更改元素显示方式有一定的局限性,因为他只对行内元素起作用,更改元素的样式一般方式有以下几种
1.标签样式,

p{color:red;}

2.css样式 ,

.xxx{color:red;}

3.id样式,

#xxx{color:red;}

    上面三种是常用的,还有一些其他css2 css3(这里就设计到了css选择器,可以去找其他资料看看)
通过上面的设置方式,我们可以通果设置class属性来对元素的样式进行改变,达到我们设计的需求:

.test{color:red;}
element.setAttribute("class","test");
或者
element.className = "test";

    此方法有一个不足的地方就是会替换原有的css样式,如果想达到在原来的基础上增加样式,那么需要自己进行封装,大概的思路就是可以在原有的class中追加,实现方式为获取class的值在后面追加一个空格和需要追加的新的class。

你可能感兴趣的:([原]读-DOM编程艺术7-CSSDOM)