结构层 表示层 行为层-网页就是由着三层信息构成的一个共同体
结构层-标签
表示层-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。
网友评论