Javascript 操作CSS 学习笔记

页面导航:首页 > 网络编程 > JavaScript > Javascript 操作CSS 学习笔记

Javascript 操作CSS 学习笔记

来源: 作者: 时间:2016-02-01 09:31 【

页面往往是动态变化的,我们经常需要在脚本里对元素的样式进行操作,刚学习js的时候大家都知道通过style属性设置css样式相关的属性,但有时候也想先获取样式,结果发现通过style取

页面往往是动态变化的,我们经常需要在脚本里对元素的样式进行操作,刚学习js的时候大家都知道通过style属性设置css样式相关的属性,但有时候也想先获取样式,结果发现通过style取到的值是空,这就需要我们对这些概念足够熟练。

一、设置样式

每个dom元素都具有一个style属性,与平常的属性不一样,style的值是一个CSSStyleDeclaration对象,这个对象的属性代表了该对应元素的内联样式。
注意上面说的是内联样式,我们知道,在

内引用的样式称为外部样式,在

盒子
var box = document.getElementById(box);
console.log(box.style.color);   //空,因为没有在内联样式内设置color属性
console.log(box.style.position);   //输出relative, 因为在内联样式中设置了position
box.style.color = #000;   //成功设置color值
console.log(box.style.color);   //输出rgb(0, 0, 0),因为刚才已经设置

命名约定

因为在js中连字符就是减号,所以在css里类似与font-size: 20px这种带有连字符的属性是不能直接通过style.font-size访问的,应该将连字符去掉,并将连字符后面第一个字母大写,或者通过数组访问形式赋值,如:

box.style.fontSize = 20px;
//或 box.style[font-size] = 20px

另外对于在js中是保留字符的属性如float,最好给其加入css前缀使其成为一个合法的属性,如

box.style.cssFloat = left;

注意

style的所有属性的值都应该是字符串,在使用style设置定位属性时,所有定位属性都需要包含单位。

box.style.left = 300;    //无效,300不是字符串
box.style.left = 300;     //无效,没有带单位
box.style.left = 300px;   //这就对了

综上,使用style对于设置样式还是比较方便的,但对于读取样式就非常困难了,首先返回的值都带有单位,其次对于像margin这种复合属性因为获取的是字符串,所以还需要对其进行拆分出四个方向的值。

最后,通过setAttribute和设置style的cssText值,也可以一次性写好所有样式,一次性赋值给元素:

var s = float: left; margin: 0 10px;
box.setAttribute(style, s);
//或者
box.style.cssText = s;

//读取也是一样的
s = box.getAttribute(style);
//或者
s = box.style.cssText;

获取计算样式

我们一般情况下其实并不关心到底是内联样式还是外联样式,只是想获取元素的样式值,元素最终显示时实际使用的属性值就成为计算样式。
计算样式也是一个CSSStyleDeclaration对象,通过window对象调用。(IE8以下不支持)

var styles = window.getComputedStyle(element, :before);

可以看到,第一个参数代表需要获取样式的元素,第二个参数代表伪对象的字符串,如果不需要可以设置成null或空字符串。

同样使用属性进行访问:

var styles = window.getComputedStyle(box, );
console.log(styles.marginLeft);         //输出0px,虽然并没有显示指定过marginLeft

区别

虽然通过style和getComputedStyle获取到的都是CSSStyleDeclaration对象,但它们还是有些区别的。

后者(通过getComputedStyle获取到的CSSStyleDeclaration对象)的属性都是只读的。 后者的值都是绝对值,也就是说你设置的可能是”50%”这种百分比,到最后获取到的都是具体的数值,尺寸大小表示为px为后缀的字符串,颜色表示为“rgb(#, #, #)”或 “rgba(#, #, # ,#)”。 不计算复合属性如margin,将返回空字符串(根据而不同,chrome支持返回)。最好使用具体的属性如marginLeft等。 没有cssText属性,将返回空字符串(根据浏览器而不同,chrome支持返回)。 对于定位属性,如果不是绝对定位,访问left、top等定位属性都返回”auto”

所以我们既要读取样式又要设置样式的时候可以结合二者进行使用。如

var box = document.getElementById(box);
var styles = window.getComputedStyle(box, );
//将文本尺寸放大两倍
var size = parseInt(styles.fontSize);
box.style.fontSize = size * 2 + px;

对于IE,有其自身的StyleDeclaration对象,通过currentStyle获取。

三、设置类名

很早以前,获取一个元素的类名都是通过className属性获取的,对于只有单个类名的元素好说,一旦元素具有多个类名,得到的将是多个类名通过空格符隔开的字符串,需要自行进行分解。


盒子
var box = document.getElementById(box);
console.log(box.className); //red btn whatever

在HTML5里面,元素新增了一个classList属性,它是一个只读对象,但提供了操作类名非常方便的方法:

add(className) 添加类名 remove(className) 移除类名 toggle(className) 如果不存在此类名则添加,存在则删除这个类名 contains(className) 检测是否包含指定的类名

有了这些方法就方便多了(对于不支持的浏览器,当然其实你也可以自己去实现这些方法)

var classList = box.classList;
classList.add(aaa);
console.log(box.className);     //red btn whatever aaa
classList.remove(red);
console.log(box.className);     //btn whatever aaa
classList.toggle(bbb);
console.log(box.className);     //btn whatever aaa bbb
classList.contains(aaa);      //true

 

Tags:

文章评论

最 近 更 新
热 点 排 行
Js与CSS工具
代码转换工具

<