JavaScript DOM2和DOM3——“款式”的注重要点

2019年8月30日 153次阅读来源: JS菌

条理：
接见style对象：

style对象是CSSStyleDeclaration的实例；
getComputedStyle要领也返回CSSStyleDeclaration的实例；

接见款式表：

<link>元素包含的款式表由HTMLLinkElement示意；
<style>元素包含的款式表由HTMLStyleElement示意；
StyleSheetList示意一切的款式表；（document.styleSheets）
CSSStyleSheet示意该款式表；（document.styleSheets[0]或document.getElementsByTagName("link").sheet/styleSheet）；

接见CSS划定规矩：

CSSRuleList示意一切的CSS划定规矩；（document.styleSheets[0].rules/cssRules）；
CSSStyleRule示意该CSS划定规矩；（document.styleSheets[0].cssRules[0]）；
CSSStyleDeclaration则经由过程style属性接见；（document.styleSheets[0].cssRules[0].style）；

举例：

var div = document.getElementById("myDiv");
console.log(div.style.border); //1px solid black 
console.log(div.style.length); //18
console.log(div.style.cssText); //order: 1px solid black; background-color: red;
console.log(div.style[0]); //background-color;
div.style.removeProperty("border");
div.style.setProperty("border","1px solid blue");
console.log(div.style.getPropertyValue("border")); //1px solid blue
console.log(document.defaultView.getComputedStyle(div).length); //263
console.log(document.defaultView.getComputedStyle(div).width); //100px;
//以上是接见元素的款式

var styleElem = document.getElementsByTagName("style")[0]; //获得style元素
var styleSheet = styleElem.sheet; //获得款式表
var rule = styleSheet.rules[0]; //获得第一个css划定规矩
console.log(rule.cssText); //#myDiv { width: 100px; height: 200px; background-color: blue; }
console.log(rule.selectorText); //#myDiv
console.log(rule.style); //CSSStyleDeclaration 此要领能够返回这个划定规矩的款式并能够赋值，设置新的款式
console.log(rule.style.width); //100px
rule.style.width = "200px";
console.log(rule.style.width); //200px
var styleSheet2 = document.styleSheets[0];
console.log(styleSheet == styleSheet2); //True证实document.styleSheets与style标签返回的styleSheet是一样的
styleSheet.insertRule("body{background-color:gray}",0); //在款式表中插进去新的CSS划定规矩
styleSheet.deleteRule(0); //在款式表中删除某个CSS划定规矩
//以上是操纵款式表

要肯定浏览器是不是支撑DOM2级定义的CSS才能，能够运用以下代码：

var supportsDOM2CSS = document.implementation.hasFeature("CSS","2.0");
var supportsDOM2CSS2 = document.implementation.hasFeature("CSS2","2.0");

接见元素的款式

须要注重的是，由于float是js中的保留字，因而不能用作属性名。而是cssFloat或IE中的styleFloat；style对象是CSSStyleDeclaration的实例。

别的，在范例形式下，一切器量值都必需指定一个器量单元。

DOM款式属性和要领

DOM2级款式范例还为style对象定义了一些属性和要领：

cssText;
length;
parentRule;
getPropertyCSSValue(propertyName);
getPropertyPriority(propertyName);
getPropertyValue(propertyName);
item(index);
removeProperty(propertyName);
setProperty(propertyName,value,priority);

`cssText`属性

style的属性，该形式能够接见style特征中的CSS代码。读取形式下，返回style特征中CSS代码的内部示意；在写入形式下，赋给cssText的值会重写全部style特征的值。如：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    p {
        font-size: 2em;
        /*嵌入式款式*/
    }
    </style>
</head>

<body>
    <p id="p" style="text-transform:capitalize">this is a paragraph.</p>
    <!-- style特征的体式格局设置css款式 -->
    <script>
    var p = document.getElementById("p");
    p.style.fontFamily = "monospace";
    // 用js经由过程style设置
    console.log(p.style.cssText); //text-transform: capitalize; font-family: monospace;
    p.style.cssText = "font-size:2em"; //重写cssText
    console.log(p.style.cssText); //font-size:2em;
    </script>
</body>

</html>

`length`属性

style的属性，length的目标，就是将其与item()要领配套运用，以便迭代在元素中定义的CSS属性。如：

<body>
    <p id="p" style="color:red;font-family: monospace;">this is a paragraph.</p>
    <script>
    var p = document.getElementById("p");
    for (var i = 0, len = p.style.length; i < len; i++) {
        console.log(p.style[i]); 
        //color
        //font-family
    };
    </script>
</body>

`getPropertyValue()`要领

style的属性，能够运用属性名进一步获得属性的值。如：

<body>
    <p id="p" style="color:red;font-family: monospace;">this is a paragraph.</p>
    <script>
    var p = document.getElementById("p");
    var i, prop;
    for (i = 0, len = p.style.length; i < len; i++) {
        prop = p.style[i];
        value = p.style.getPropertyValue(prop);
        console.log(prop + "-->" + value);
        //color-->red
        //font-family-->monospace
    };
    </script>
</body>

`getPropertyCSSValue()`要领

style属性，返回一个包含两个属性的CSSValue对象，这两个属性分别是cssText和cssValueType。个中，cssText属性的值与getPropertyValue()返回的值雷同，而cssValueType属性则是一个数值常量，示意值的范例：0为继续的值；1为基础的值；2为列表；3为自定义的值。以下面的代码即输出CSS属性值，也输出值的范例：

var p = document.getElementById("p");
var i, prop;
for (i = 0, len = p.style.length; i < len; i++) {
    prop = p.style[i];
    value = p.style.getPropertyCSSValue(prop);
    console.log(prop + ":" + value.cssText + "," + value.cssValueType);
    // [Log] color:red,1 (testingjs.js, line 6)
    // [Log] font-family:monospace,2 (testingjs.js, line 6)
}

也许兼容性有题目，这个代码在chrome中运转不了。不过，此要领不经常使用，平常都是用getPropertyValue()要领

`removeProperty()`要领

该属性的目标是要移除某个CSS属性。如：

var p = document.getElementById("p");
p.style.removeProperty("color");

`setProperty()`要领

该属性的目标是要增加某个CSS属性。如：

var p = document.getElementById("p");
console.log(p.style.setProperty("color","orange"));

盘算的款式`getComputedStyle()`要领和`currentStyle`属性

前者是增强了document.defaultView，这个要领吸收两个参数：盘算款式的元素以及一个伪元素字符串（如:after）。假如不须要伪元素信息，第二个值设置为null即可。该要领返回一个CSSStyleDeclaration对象，以下面代码为例：

<style>
#myDiv {
    background-color: blue;
    width: 100px;
    height: 200px;
}
</style>

<div id="myDiv" style="background-color:red;border:1px solid black"></div>

运用getComputedStyle()要领，用法是document.defaultView.getComputedStyle()返回CSSStyleDeclaration实例：

var myDiv = document.getElementById("myDiv");
var computedStyle = document.defaultView.getComputedStyle(myDiv, null);
console.log(computedStyle.length); //263
console.log(myDiv.style.length); //18
console.log(computedStyle.backgroundColor); //rgb(255,0,0)
console.log(computedStyle.border); //1px solid rgb(0, 0, 0)
console.log(computedStyle.width + computedStyle.height); //100px200px

currentStyle属性则是用在IE上的，与上述相似。用法是element.currentStyle返回CSSStyleDeclaration实例。

操纵表款式

CSSStyleSheet范例示意的是款式表，包含link元素包含的款式表和在style元素中定义的款式表。这两个元素自身是由HTMLLinkElement和HTMLStyleElement范例示意的。然则CSSStyleSheet范例相对越发通用一些，它只示意款式表，而不论这些款式表在HTML中是怎样定义的。CSSStyleSheet继续自StyleSheet，接口属性以下：

disabled：示意款式表是不是被禁用的布尔值；
href：假如是link元素示意的款式表，则是款式表的URL，否则是null；
media：当前款式表支撑的一切媒体范例的鸠合，可用length属性和item()要领，在IE中返回字符串；
ownerNode：指向具有当前款式表的节点的指针；IE不支撑；
parentStyleSheet：假如款式表是经由过程@import导入的，这个属性是一个指向导入它的款式表的指针；
title：ownerNode中title值；
type：款式表范例的字符串，平常是“type/css”；

CSSStyleSheet范例还支撑下面的属性和要领：

cssRules：款式表中包含的款式划定规矩的鸠合。IE不支撑但有个相似的rules；
ownerRule：款式表是经由过程@import导入的，这个属性就是一个指针，指向示意导入的划定规矩；否则为null；IE不支撑；
deleteRule(index)：删除cssRules鸠合中指定位置的划定规矩；IE不支撑但有个相似的removeRule()要领；
insertRule(rule,index)：向cssRules鸠合中指定的位置插进去rule字符串，IE不支撑但有个相似的addRule()要领；

应用于文档中的一切款式表是经由过程document.styleSheets鸠合来示意的。

别的，也能够直接经由过程link元素和style元素获得CSSStyleSheet对象。DOM划定了一个包含CSSStyleSheet对象的属性，名叫sheet；在IE，能够运用styleSheet属性。如：

console.log(document.getElementsByTagName("style")[0].sheet); //CSSStyleSheet对象
console.log(document.getElementsByTagName("style")[0].styleSheet); //CSSStyleSheet对象 只用于IE
console.log(document.styleSheets[0]); //一样也是CSSStyleSheet对象

CSS划定规矩

条理梳理：

console.log(document.styleSheets); //StyleSheetList对象 该行代码包含着一切包含link元素和style元素的款式表
console.log(document.styleSheets[0].cssRules); //CSSRuleList对象 该行代码包含着第一个款式表中的一切划定规矩
console.log(document.styleSheets[0].cssRules[0]); //CSSStyleRule对象 该行代码示意第一个款式表中的第一条划定规矩 可经由过程cssText属性接见

CSSRule对象示意款式表中的每一条划定规矩：

cssText：返回整条划定规矩对应的文本；IE不支撑；
parrentRule：假如是导入的划定规矩，这个属性引入的就是导入划定规矩否则为null；
parentStyleSheet：当前划定规矩所属的款式表，IE不支撑；
selectorText：返回当前划定规矩的选择符文本；
style：能够经由过程它设置和获得划定规矩中特征的款式值；是一个CSSStyleDeclaration对象；
type：划定规矩范例的常量值，关于款式划定规矩，这个值是1；IE不支撑；

比较经常使用的属性是：cssText、selectorText、style。别的，cssText是只读的，然则style.cssText则是读写的。

以下面的代码为例：

<style>
#myDiv {
    background-color: blue;
    width: 100px;
    height: 200px;
}

p {
    color: red;
}
</style>

script代码以下：

var sheet = document.getElementsByTagName("style")[0].sheet; //获得第一个stylesheet
var rule = sheet.rules[0]; //获得该款式表中第一条划定规矩

console.log(rule.cssText); //#myDiv { width: 100px; height: 200px; background-color: blue; }（获得该划定规矩对应的文本）
console.log(rule.selectorText); //#myDiv（该划定规矩的选择符文本）

console.log(rule.style); //CSSStyleDeclaration
console.log(rule.style[0]); //background-color（获得该划定规矩中特定的款式值）
console.log(rule.style[1]); //width

别的，能够用style的体式格局修正款式信息：

var sheet = document.getElementsByTagName("style")[0].sheet;
var targetRule = sheet.rules[0];
targetRule.style.height = "300px";

建立划定规矩

insertRule()要领，向现有款式表中增加新划定规矩；吸收两个参数：划定规矩文本和插进去划定规矩的索引。IE8及更早的的浏览器支撑相似的要领：addRule()，吸收两个必选参数：选择符文本、CSS款式信息和一个可选参数：插进去划定规矩的位置；

删除划定规矩

deleteRule()要领，吸收一个参数：要删除的划定规矩的位置，IE顶用removeRule()要领

元素大小

DOM中没有划定怎样肯定页面中元素的大小，IE为此领先引入了一些属性。

偏移量

offsetHeight：垂直方向上占用的空间大小；
offsetWidth：程度方向上占用的空间大小；
offsetLeft：左外边框至包含元素的左内边框之间的像素间隔；
offsetTop：上外边框至包含元素的上内边框之间的像素间隔；

以下面的div元素:


<style>
* {
    padding: 0;
    margin: 0;
}
</style>

<div id="myDiv" style="background-color:red;height:100px;width:80px;border:1px solid gray;margin:10px;margin-top:20px;padding:10px;padding-left:20px"></div>

script:

var div = document.getElementById("myDiv");
console.log(div.offsetHeight); //122 包含了100px的高度、2个1px的border、2个10px的padding，共122px
console.log(div.offsetWidth); //112 包含了80px的高度、2个1px的border、1个10px的padding和1个20px的padding-left，共112px
console.log(div.offsetLeft); //10 包含了10px的margin
console.log(div.offsetTop); //20 包含了20px的margin-top

对块级元素来讲，offsetTop、offsetLeft、offsetWidth 及 offsetHeight 形貌了元素相关于 offsetParent 的边境框。

`offsetParent`属性，该属性不一定与parentNode值相称，多是body也有多是table；要想晓得某个元素在页面上的偏移量，用下面函数：

<body>
    <div style="margin-top:10px;margin-left:20px;padding-top:20px;padding-left:10px;width:200px;height:200px;background-color:gray;">
        <div id="myDiv" style="background-color:red;height:100px;width:80px;border:1px solid gray;margin:10px;margin-top:20px;padding:10px;padding-left:20px"></div>
    </div>
    <table id="myTable" style="margin:25px;border:1px solid gray;" cellspacing=0;>
        <tr>
            <th>th1</th>
            <th>th2</th>
        </tr>
        <tr>
            <td>td1</td>
            <td>td2</td>
        </tr>
    </table>
    <script>
    var div = document.getElementById("myDiv");

    function getElementLeft(element) {
        var actualLeft = element.offsetLeft;
        var currentParent = element.offsetParent;
        while (currentParent !== null) {
            actualLeft += currentParent.offsetLeft;
            currentParent = currentParent.offsetParent;
        }
        return actualLeft;
    }
    console.log(getElementLeft(div)); //40

    var data = document.getElementById("myTable").getElementsByTagName("td")[0];
    console.log(getElementLeft(data)); //25
    console.log(data.offsetLeft); //0
    </script>
</body>

关于运用表格和内嵌框架规划的页面，差异浏览器完成这些元素的体式格局差异，获得的值不会太正确。

客户区大小

指的是内容及内边距所占有的空间大小：clientWidth、clientHeight；如：

<div id="myDiv" style="background-color:red;height:100px;width:80px;border:1px solid gray;margin:10px;margin-top:20px;padding:10px;padding-left:20px"></div>

console.log(div.clientHeight); //120 height加上padding，不包含margin和border
console.log(div.clientWidth); //110 width加上padding，不包含margin和border

又如运用该属性获得浏览器视口大小：

var div = document.getElementById("myDiv");
function getViewport() {
    if (document.compatMode == "BackCompat") {
        return {
            width: document.body.clientWidth,
            height: document.body.clientHeight
        };

    } else {
        return {
            width: document.documentElement.clientWidth,
            height: document.documentElement.clientHeight
        };
    }
}
console.log(getViewport()); //{width: 1280 height: 913}

转动大小

指的是包含转动内容的元素的大小：

scrollHeight：在没有转动条的情况下，元素内容的总高度；
scrollWidth：在没有转动条的情况下，元素内容的总宽度；
scrollLeft：被隐蔽在内容地区左边的像素数；
scrollTop：被隐蔽在内容地区上方的像素数；

如：

#pId{
        width: 100px;
        height: 100px;
        border: 1px solid gray;
        overflow: scroll;
    }

<p id="pId" class="info">thisisamessage.thisisamessage.thisisamessage.
    thisisamessage.thisisamessage.
    thisisamessage.
    thisisamessage.
    thisisamessage.
    thisisamessage.thisisamessage.
    thisisamessage.thisisamessage.thisisamessage.thisisamessage.thisisamessage.thisisamessage.thisisamessage.
</p>

var x = document.getElementById("pId");
var t = setTimeout(echoo, 1000);
function echoo() {
    console.log(x.scrollLeft);
    var y = setTimeout(echoo, 1000);
}

别的，带有垂直转动条的页面总高度就是document.documentElement.scrollHeight。

在不包含转动条的页面而言，scrollWidth和scrollHeight与clientWidth和clientHeight之间的关联并非分清楚。一些浏览器会涌现不一致题目，如：

Firefox 中这两组属性是相称的，大小代表的是文档内容地区的现实尺寸，非视口尺寸；
Opera、Safari >= 3.1、Chrome中这两组属性是有差异的，s…是视口大小，c…是文档内容地区的大小；
IE在范例形式下，s…是内容地区大小，c…是视口大小；

要肯定文档的总高度时，必需获得s…或c…之间的最大值（Math.max），如：

var docHeight = Math.max(document.documentElement.scrollHeight, document.documentElement.clientHeight);
console.log(docHeight); //913
var docWidth = Math.max(document.documentElement.scrollWidth, document.documentElement.scrollWidth);
console.log(docWidth); //1280

下面的函数会检测元素是不是位于顶部，假如不是就会将其自动滚到顶部：

#pId{
        width: 150px;
        height: 200px;
        border: 1px solid gray;
        overflow: scroll;
    }

<p id="pId">HTMLElement.offsetParent 是一个只读属性，返回一个指向近来的（closest，指包含层级上的近来）包含该元素的定位元素。假如没有定位的元素，则 offsetParent 为近来的 table 元素对象或根元素（范例形式下为 html；quirks 形式下为 body）。当元素的 style.display 设置为 "none" 时，offsetParent 返回 null。offsetParent 很有效，由于 offsetTop 和 offsetLeft 都是相关于其内边距边境的。</p>
<input type="button" value="scroll to top" id="stt">

var pElem = document.getElementById("pId");
var btn = document.getElementById("stt");

btn.onclick = scrollToTop;

function scrollToTop() {
    if (pElem.scrollTop !== 0) {
        pElem.scrollTop = 0;
    }
}

肯定元素大小

getBoundingClientRect()要领会返回一个矩形对象，包含4个属性：left、top、right和bottom：

var p = document.getElementById("divId");
console.log(p.getBoundingClientRect().right); //110
console.log(p.getBoundingClientRect().left); //10
console.log(p.getBoundingClientRect().top); //10
console.log(p.getBoundingClientRect().bottom); //60

注重：IE、Firefox3+、Opera9.5、Chrome、Safari支撑，在IE中，默许坐标从(2,2)最先盘算，致使终究间隔比其他浏览器多出两个像素，我们须要做个兼容。

document.documentElement.clientTop; // 非IE为0，IE为2
document.documentElement.clientLeft; // 非IE为0，IE为2
functiongGetRect(element) {
    var rect = element.getBoundingClientRect();
    var top = document.documentElement.clientTop;
    var left = document.documentElement.clientLeft;
    return {
        top: rect.top - top,
        bottom: rect.bottom - top,
        left: rect.left - left,
        right: rect.right - left
    }

}

    原文作者：JS菌
    原文地址: https://segmentfault.com/a/1190000004195232
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。

接见元素的款式

DOM款式属性和要领

cssText属性

length属性

getPropertyValue()要领

getPropertyCSSValue()要领

removeProperty()要领

setProperty()要领

盘算的款式getComputedStyle()要领和currentStyle属性