DOM编程-样式操作

DOM编程-样式操作

几个需求

一、在我们进行登录注册的时候，当我们的输入不符合规则，光标离开后会变色来提示用户
二、页面换肤，用户的选择会改变整个页面的样式

CSS对样式的影响

可以通过外部引入CSS文件，在head中内嵌CSS，在style属性中添加CSS属性

CSS->DOM

说明：下面的style对应的是CSSStyleDeclaretion的一个对象

内部样式表

<style>
    body{margin:30px;}
    p{color:red;line-height:20px;}
</style>

我们通过element.sheet.cssRules得到css的列表
列表可以用下标访问element.sheet.cssRules[1]就是对p{color:red;}
element.sheet.cssRules[1].selectorText对应的是选择器p
element.sheet.cssRules[1].style对应的就是CSS声明color:red;line-height:20px;,是一个对象
element.sheet.cssRules[1].style.lineHeight对应的是属性值20px,注意属性名应该写成驼峰格式

内嵌CSS

<p sttyle="color:red;">paragreph</p>

element.style.color对应的就是red

更新样式

对于我们的需求更改输入框

element.borderColor = "red";
element.style.color="red";

这样会在input上添加一个内嵌的样式表，优先级最高，可以有效改变样式。

问题

• 改变一个属性就需要一条语句
• 格式和我们熟悉的CSS不同，在两种格式的转换中可能出错

更好的方法style.cssText

对于同样的需求element.style.cssText = 'border-color:red;color:red;'可以在一条语句中实现需求，并且和CSS格式相同。

问题

样式混在逻辑中，JS和CSS混合起来

推荐的解决方法,更新class

我们先在CSS中写一个不被引入的样式.index{border-color:red;color:red;}
然后在JS中element.className += 'index'
这样就在input元素上增加了class

问题

当需要一次更新很多元素的样式时，比较繁琐难以实现

针对于大量样式更改的方法

比如对页面进行更换主题，换肤，我们可以使用更换样式表来解决。
比如从<link id="index" rel="stylesheet" type="text/css" href="index1.css"/>更改为<link rel="stylesheet" type="text/css" href="index2.css"/>我们可以用如下语句$('index').href = "index2.css"
通过这个方式我们还可以增加样式，删除样式来进行批量处理。

获取样式

element.style 是获取不到实际样式的，只能得到行内的style，因此style得到的不一定是实际的样式。

方法window.getComputedStyle()；

var style = window.getComputedStyle(element[,pseudoEit]);
对于<input type="text" style="color:red">我们使用这个方法window.getComputedStyle(element).color; //"rgb(155,0,0)"

这个方法在IE9以下不支持，我们使用element.currentStyle做兼容

function getStyle(element, cssName){
    //特性侦测
    if(window.getComputedStyle){
        //优先使用W3C规范
        return window.getComputedStyle(element)[cssName];
    }else{
        //针对IE9以下兼容
        return element.currentStyle[cssName];
    }
}