返回首页 | 新开户送体验金的娱乐城

合作共赢、快速高效、优质的网站建设提供商

更多精品源码-尽在织梦模板-www.moke8.com

[编码]用js动态改变元素的css

时间:2017-07-31 编辑:admin

1: CSSStyleDeclaration对象
跟别的属性一样,style也是元素的一个属性,只是style属性是一个比较特殊的属性,它不是一个字符串,而是一个叫做CSSStyleDeclatation的对象:一个包含CSS属性的对象。比如:

element.style.fontSize = '20px';
element.style.color = '#fff';

2: js中对应的css属性的名字的规则

1: css中属性的连字符(-)变为驼峰
 element.style.fontSize = '20px';
2: 当属性为js保留字时,在前面加前缀'css'
 element.style.cssFloat = 'left';
3: 给属性赋值必须为字符串类型: 
 element.style.fontSize = '40px'; (对的)
 element.style.fontSize = 40;(错的)
 element.style.fontSize = '40';(也是错的,需要带上单位,除非是‘100%’之类的百分百)

3: css中的复合样式
在js里面也可以像在css中那样使用复合样式,比如:

element.style.padding = '20px 30px 40px 50px';

以上代码使用复合样式属性‘padding’给元素指定了'padding-top', 'padding-right', 'padding-bottom', 'padding-left'的值,分别为'20px', '30px', '40px', '50px'.
4: 通过js设置的CSS属性的权重
我们都知道在html中有三种方式来改变元素的css,分别是:
1: 内联css

 h1 测试 /h1 

2: 嵌入式

 head 
 style type="text/css" 
 span{ 
 color:red; 
 /style 
 /head 

3: 外部引用

 link rel='stylesheet' type='text/css' href='reset.css' 

在这三种里面,我们知道第一种内联式的权重是最高的。通过js来设置的css正好就是内联的式,所以他会覆盖嵌入式和外部引用的同名css属性。

还有一个很重要的点:要避免直接给style对象整个赋值,比如

element.style = 'fontSize: 40px';

如果这个元素本来的内联属性有很多,而你的本意其实只是想改变fontSize; 但是,通过上面的代码,会把其他的内联属性都去掉,最后只留下了fontSize.

4: window.getComputedStyle(element, pseudoElement);
在全局对象window上有一个方法叫‘getComputedStyle()’, 通过它可以获取某个元素的最终的计算出来的属性,也就是最终告诉浏览器怎么去渲染这个元素的css的属性。
这个方法接受两个参数:

1: element 
 想要查询的元素,必须
2: pseudoElement
 想要查询的元素的伪元素,当是null或者空字符串时,就是表示想查询元素本身,而不是伪元素

这个方法的返回值也是一个CSSStyleDeclaration对象,只是它和元素的style属性有一些区别:
1: 它是只读的
2: 它返回的css属性的值是经过计算了的。
类似于百分比,rem之类的相对值,不会被返回,而是返回换算好之后的绝对值,比如只会返回px为单位的值
3: 颜色以'rgb(#, #, #)'或者‘rgba(#, #, #, #)’返回,而不是16进制
4: 复合样式,会以特定的属性返回。
比如window.getComputedStyle(element, pseudoElement).padding是没有的,应该查询window.getComputedStyle(element, pseudoElement).paddingTop


浏览:

网站建设

流程

    网站建设流程