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 style="font-size: 40px;">测试</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
4: 猎取一个元素的类名
想猎取一个元素的CSS类名,有两个属性都能够做到:
1: className
2: classList
先来试验一下,直观地感受一下这两者的区分。如果,我们有一个元素:
//HTML code
<div class="z-top-container has-banner">test</div>
//js code
var ele = document.querySelector('.z-top-container');
ele.className; //"z-top-container has-banner"
ele.classList; // ["z-top-container", "has-banner", value: "z-top-container has-banner"]
从上面的例子我们就能够看出区分:
1: className返回一个字符串,如果这个元素有多个class,则以空格分开。
2: classList返回的是一个DOMTokenList对象:一个只读的类数组对象。
接下来我们着重地来讲一下这个DOMTokenList对象。
DOMTokenList对象定义了三个修正元素的class的要领:
1: add(className)
参数为class名字,范例为字符串,作用是给这个元素增加一个class
ele.classList.add('hehe'); //给元素ele增加了一个名为‘hehe’的长css 类
2: remove(className)
参数为class名字,范例为字符串,作用是给这个元素删除一个class
ele.classList.remove('hehe');//从ele的css类内里去掉‘hehe’这个类
3: toggle(className)
参数为class名字,范例为字符串,作用是如果元素没有这个class,就增加;如果已经有了,就删除。