DOM脚本设置样式

来源：互联网发布：淘宝上卖工艺品好卖吗编辑：程序博客网时间：2024/06/01 15:16

currentStyle，getComputedStyle

1. 网页由三层信息构成的一个共同体：

           1）结构层（由HTML或XHTML之类的标记语言创建）

           2）表现层（由css负责完成，页面呈现的效果）

            3）行为层（负责内容该如何响应事件这个问题）

以下例子皆在此背景下：

<html lang="en"><head><meta charset="UTF-8"><title>样式设置</title><style>#box {width: 100%;height: 100px;color: #fff;font-size: 30px;border: 1px solid navy;}</style></head><body><div id="box" style="background-color: red;">样式设置</div></body></html>

2.style属性：每一个元素节点都会有一个style属性，style属性包含元素的样式，查询这个样式将会返回一个

对象，而不是一个简单的字符串。样式都存放在这个style对象的属性里。

                         var myDiv = document.querySelector("#box");     console.log(myDiv.style);//获取CSSStyleDeclaration对象

3.获取样式：

1）element.style.property(property名字中，不管有多少个字符，DOM一律采用驼峰命名法例如：fontSize)

    myDiv.style.fontSize = "orange";

但是上述的方法，局限性很大，通过style属性只能获取行间样式（内嵌样式），在外部声明的样式不会进入style对象，即使是在heade标签内声明的样式也会如此。

2）使用js操作获取样式：

IE浏览器：element.currentStyle方法

其它:getComputedStyle(elem , peroperty)方法

        //IE浏览器console.log("IE浏览器下获取width值" + myDiv.currentStyle['width']);// 标准浏览器 window.getComputedStyle(element,false)["color"]; false处可以用nullconsole.log("标准浏览器获取width值" + window.getComputedStyle(myDiv,false)['width']);

3）兼容浏览器的方法

       //兼容浏览器获取样式function getStyle(elem , name){//name是指属性名

<span style="white-space:pre"></span>if(){

<span style="white-space: pre;"></span><pre name="code" class="html" style="font-size: 14px; text-indent: 56px;"><span style="white-space:pre"></span>if(elem.currentStyle){<span style="white-space:pre"></span>return elem.currentStyle[name];<span style="white-space:pre"></span>}else{return window.getComputedStyle(elem , false)[name];<span style="white-space:pre"></span>}

<span style="white-space: pre;"></span>  }

4）DOM2级样式增强了document.defaultView，提供了getComputedStyle()方法。这个方法接受两个参数：要取得计算样式的元素和一个伪元素字符串（例如“:after”）。如果不需要伪元素信息，第二个参数可以是null。getComputerStyle()方法返回一个CSSStyleDeclaration对象，其中包含当前元素的所有计算的样式(做到全部IE和标准都兼容)。

console.log(document.defaultView.getComputedStyle(myDiv , false));

3.设置样式：

1）style属性都是可读写的，可以使用赋值的方法

2）在js中可以使用元素节点的className属性进行修改样式，它是一个可读/可写的属性。凡是元素节点都有这个属性，可以直接给它赋值，但是是替换所有类，而不是追加。

0 0