Web 前端开发 让前端飞

dom总结:DOM2和DOM3中样式部分

2018-03-07  本文已影响0人  我不是大熊
访问元素的样式

任何支持 style 特性的 HTML 元素在 JavaScript 中都有一个对应的 style 属性。这个 style 对象 是 CSSStyleDeclaration 的实例，包含着通过 HTML 的 style 特性指定的所有样式信息，但不包含 与外部样式表或嵌入样式表经层叠而来的样式。在 style 特性中指定的任何 CSS 属性都将表现为这个 style 对象的相应属性。对于使用短划线(分隔不同的词汇，例如 background-image)的 CSS 属性名，必须将其转换成驼峰大小写形式，才能通过 JavaScript 来访问。特殊:float对应属性是cssFloat(safari,chrome,Firefox,Opera)或者styleFloat.

html:
<div class="group">
    <div class="top">
        <div class="top-title" data-index="199">顶部标题</div>
        <div class="top-content">顶部内容顶部内容</div>
        <ul class="top-ul">
            <li>顶部第一行</li>
            <li>顶部第二行</li>
            <li style="color:red;" class="top-li">顶部第三行</li>
            <li style="color:blue;background-color:lightgrey;font-size: 19px;" class="top-lastLi">顶部第四行</li>
        </ul>
        <button class="btn">我是按钮</button>
    </div>
    <div class="bottom">
        <div class="bottom-title common-title">底部标题</div>
        <ul class="bottom-ul">
            <li>底部第一行</li>
            <li>底部第二行</li>
            <li>底部第三行</li>
            <li>底部第四行</li>
        </ul>
    </div>
</div>
js:
 var ele = document.querySelector(".top-lastLi");
 console.log(ele.style.backgroundColor);
 console.log(ele.style.color);
 console.log(ele.style.fontSize);
 //设置样式
 ele.style.width = "200px";
1.DOM 样式属性和方法
    //遍历style的属性名和值
    for(var i=0,len=ele.style.length;i<len;i++){
        var prop = ele.style.item(i);
        console.log(prop + ":" + ele.style.getPropertyValue(prop));
    }
    //删除某个style设置,恢复默认值
    ele.style.removeProperty("font-size");
    //获取css特性的优先权标志
    console.log(ele.style.getPropertyPriority("color"));
2.计算的样式

虽然 style 对象能够提供支持 style 特性的任何元素的样式信息，但它不包含那些从其他样式表 层叠而来并影响到当前元素的样式信息。“DOM2 级样式”增强了 document.defaultView，提供了 getComputedStyle()方法。这个方法接受两个参数:要取得计算样式的元素和一个伪元素字符串(例 如":after")。如果不需要伪元素信息，第二个参数可以是 null。getComputedStyle()方法返回一个 CSSStyleDeclaration 对象(与 style 属性的类型相同)，其中包含当前元素的所有计算的样式。

css:
    <style>
        .top-lastLi{
            color:orange;
            width:150px;
        }
    </style>
js:
    var ele = document.querySelector(".top-lastLi");
    console.log(ele.style.width);
    var computedStyle = document.defaultView.getComputedStyle(ele,null);
    console.log(computedStyle.width);
    console.log(computedStyle.fontSize);
    console.log(computedStyle.border);

所有计算的样式都是只读的;不能修改计算后样式对 象中的 CSS 属性。此外，计算后的样式也包含属于浏览器内部样式表的样式信息，因此任何具有默认值 的 CSS 属性都会表现在计算后的样式中,会因不同浏览器默认值而不同.
如果在IE中,没有getComputedStyle()方法,代替的是currentStyle属性,和style属性类似,只是它包括的是所有计算样式.

操作样式表

CSSStyleSheet 类型表示的是样式表，包括通过<link>元素包含的样式表和在<style>元素中定义的样式表。
CSSStyleSheet 继承自 StyleSheet，后者可以作为一个基础接口来定义非 CSS 样式表。从 StyleSheet 接口继承而来的属性如下:

除了 disabled 属性之外，其他属性都是只读的。在支持以上所有这些属性的基础上， CSSStyleSheet 类型还支持下列属性和方法:

    //获取样式表:包括<link>和<style>
    console.log(document.styleSheets);
    for(var i=0,len=document.styleSheets.length;i<len;i++){
        var sheet = document.styleSheets[i];
        console.log(sheet.disabled);
    }
    //取得第一个<link/>元素引入的样式表
    var link = document.getElementsByTagName("link")[0];
    console.log(link.sheet || link.styleSheet);

如果在style中import样式表进来，可以这样提取出来：

    <style>
        @import url(dom2.css);
        .top-lastLi{
            color:orange;
            width:150px;
        }
    </style>
js:
var sheet = document.styleSheets[0];
var rules = sheet.rules;
//这条规则是CSSImportRule的实例
var sheetRule = rules[0];
//通过styleSheet属性把import进来的样式表提取出来
var importSheet = sheetRule.styleSheet;

CSSRule 对象表示样式表中的每一条规则。实际上，CSSRule 是一个供其他多种类型继承的基类 型，其中最常见的就是 CSSStyleRule 类型，表示样式信息。CSSStyleRule 对象包含下列属性：

改/增/删样式表规则
    //增删改第一个样式表:
    
    var sheet = document.styleSheets[0];//取得样式表
    var rules = sheet.cssRules || sheet.rules;//取得规则列表
    console.log(rules);
    for(var i=0,len=rules.length;i<len;i++){
        console.log('整体：'+rules[i].cssText + '  选择器：'+rules[i].selectorText + '    样式：'+rules[i].style.cssText);
    }
    rules[0].style.color = "green";
    rules[0].style.backgroundColor = "lightgray";
    //增
    sheet.insertRule(".top-content {font-size:20px;color:blue;}",0);
    sheet.addRule(".top-content","color:red;",1);//主要针对IE
    function insertsRule(sheet,selectorText,cssText,position) {
        if(sheet.insertRule){
            sheet.insertRule(selectorText + "{" + cssText + "}", position);
        }
        else if(sheet.addRule){
            sheet.addRule(selectorText,cssText,position);
        }
    }
    insertsRule(sheet,".top-content","color:blue;",2);
    //如果要增加的规则不少，还是动态加载样式表方便

    //删
    sheet.deleteRule(3);
    sheet.removeRule(4);//主要针对IE

    //删和增规则慎用，影响大
元素大小

此处介绍的属性和方法并不属于“DOM2 级样式”规范，但却与 HTML 元素的样式息息相关。

偏移量

偏移量(offset dimension):包括元素在屏幕上占用的所有可见的空间。元素的可见大小由其高度、宽度决定，包括所有内边距、滚动条和边框大小(注意，不包括外边距)。4个相关属性:

而offsetParent属性就是对包含元素的引用(即定位父级),offsetParent 属性不一定与 parentNode 的值相等。offsetParent是指与当前元素最近的经过定位(position不等于static)的父级元素:

要想知道某个元素在页面上的偏移量，将这个元素的 offsetLeft 和 offsetTop 与其 offsetParent 的相同属性相加，如此循环直至根元素，就可以得到一个基本准确的值:

    function getElementLeft(element){
        var actualLeft = element.offsetLeft;
        var current = element.offsetParent;
        while (current !== null){
            actualLeft += current.offsetLeft;
            current = current.offsetParent;
        }
        return actualLeft;
    }

    function getElementTop(element) {
        var actualTop = element.offsetTop;
        var current = element.offsetParent;
        while (current !== null) {
            actualTop += current.offsetTop;
            current = current.offsetParent;
        }
        return actualTop;
    }
  注意:对于使用表格和内嵌框架布局的页面
       由于不同浏览器实现这些元素的方式不同，
       因此得到的值就不太精确了。

所有这些偏移量属性都是只读的，而且每次访问它们都需要重新计算。因此，应该尽量避免重复访问这些属性;如果需要重复使用其中某些属性的值，可以将它们保存在局部变量中，以提高性能。

客户区大小

元素的客户区大小(client dimension)，指的是元素内容及其内边距所占据的空间大小:

    //确定视口大小
    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());

与偏移量相似，客户区大小也是只读的，也是每次访问都要重新计算的

滚动大小

滚动大小(scroll dimension):指的是包含滚动内容的元素的大小。4个相关属性:

    var docHeight = Math.max(document.documentElement.scrollHeight, document.documentElement.clientHeight);
    var docWidth = Math.max(document.documentElement.scrollWidth, document.documentElement.clientWidth);
注意，对于运行在混杂模式下的 IE，
     则需要用 document.body 代替 document.documentElement。

//回滚回顶部(尚未确定是否完全兼容)
    document.querySelector(".scroll-top").onclick = function () {
        document.documentElement.scrollTop = 0;
        document.body.scrollTop = 0;
    };

总结:
height = 内容高度(获取:document.defaultView.getComputedStyle(element,null).height)
clientHeight = height + padding-top + padding-bottom
offsetHeight = height + padding-top + padding-bottom + border-top + border-bottom
scrollHeight = 内容的的真实高度(如果没有滚动的内容则等于clientHeight,如果有则是内容的全部高度)

确定元素大小

IE、Firefox 3+、Safari 4+、Opera 9.5 及 Chrome 为每个元素都提供了一个 getBoundingClientRect()方法。这个方法返回会一个矩形对象，包含 4 个属性:left、top、right 和 bottom。但是，浏览器的实现稍有不同。IE8 及更早版本认为文档的左上角坐 标是(2, 2)，而其他浏览器包括 IE9 则将传统的(0,0)作为起点坐标。因此，就需要在一开始检查一下位于 (0,0)处的元素的位置，在 IE8 及更早版本中，会返回(2,2)，而在其他浏览器中会返回(0,0)。

    function getBoundingClientRect(element){
        var scrollTop = document.documentElement.scrollTop;
        var scrollLeft = document.documentElement.scrollLeft;
        if (element.getBoundingClientRect){
            if (typeof arguments.callee.offset != "number"){
                var temp = document.createElement("div");
                temp.style.cssText = "position:absolute;left:0;top:0;"; document.body.appendChild(temp);
                arguments.callee.offset = -temp.getBoundingClientRect().top - scrollTop; document.body.removeChild(temp);
                temp = null;
            }
            var rect = element.getBoundingClientRect();
            var offset = arguments.callee.offset;
            return {
                left: rect.left + offset,
                right: rect.right + offset,
                top: rect.top + offset,
                bottom: rect.bottom + offset
            };
        } else {
            var actualLeft = getElementLeft(element);
            var actualTop = getElementTop(element);
            return {
                left: actualLeft - scrollLeft,
                right: actualLeft + element.offsetWidth - scrollLeft,
                top: actualTop - scrollTop,
                bottom: actualTop + element.offsetHeight - scrollTop
            }
        } }
注意:由于这里使用了arguments.callee，所以这个方法不能在严格模式下使用。
上一篇下一篇

猜你喜欢

热点阅读