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

访问元素的样式

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

html:

    
        顶部标题
        顶部内容顶部内容
        
            顶部第一行
            顶部第二行
            顶部第三行
            顶部第四行
        
        
    
    
        底部标题
        
            底部第一行
            底部第二行
            底部第三行
            底部第四行
        
    

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 样式属性和方法

cssText:style 特性中的 CSS 代码
length:应用给元素的 CSS 属性的数量
parentRule:表示 CSS 信息的 CSSRule 对象
getPropertyCSSValue(propertyName):返回包含给定属性值的 CSSValue 对象(暂时没发现能用)
getPropertyPriority(propertyName):如果给定的属性使用了!important 设置，则返回"important";否则，返回空字符串。
getPropertyValue(propertyName):返回给定属性的字符串值。
item(index):返回给定位置的 CSS 属性的名称。
removeProperty(propertyName):从样式中删除给定属性。
setProperty(propertyName,value,priority):将给定属性设置为相应的值，并加上优先权标志("important"或者一个空字符串)。

    //遍历style的属性名和值
    for(var i=0,len=ele.style.length;i

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

cssText（常用）:返回整条规则对应的文本。由于浏览器对样式表的内部处理方式不同，返回的文本可能会与样式表中实际的文本不一样;Safari 始终都会将文本转换成全部小写。IE 不支持这个属性。
parentRule:如果当前规则是导入的规则，这个属性引用的就是导入规则;否则，这个值为 null。IE 不支持这个属性。
parentStyleSheet:当前规则所属的样式表。IE 不支持这个属性。
selectorText（常用）:返回当前规则的选择符文本。由于浏览器对样式表的内部处理方式不同，返回的文本可能会与样式表中实际的文本不一样(例如，Safari 3 之前的版本始终会将文本转换成全部小写 )。在Firefox,chrome,safari和IE中这个属性是只读的。Opera允许修改selectorText。
style（常用）:一个 CSSStyleDeclaration 对象，可以通过它设置和取得规则中特定的样式值。
type:表示规则类型的常量值。对于样式规则，这个值是 1。IE 不支持这个属性。

改/增/删样式表规则

    //增删改第一个样式表:
    
    var sheet = document.styleSheets[0];//取得样式表
    var rules = sheet.cssRules || sheet.rules;//取得规则列表
    console.log(rules);
    for(var i=0,len=rules.length;i

 
 元素大小 
 此处介绍的属性和方法并不属于“DOM2 级样式”规范，但却与 HTML 元素的样式息息相关。 
 偏移量 
 偏移量(offset dimension):包括元素在屏幕上占用的所有可见的空间。元素的可见大小由其高度、宽度决定，包括所有内边距、滚动条和边框大小(注意，不包括外边距)。4个相关属性: 
  
  offsetHeight:元素在垂直方向上占用的空间大小，以像素计。包括元素的高度、(可见的) 水平滚动条的高度、上边框高度和下边框高度。 
  offsetWidth:元素在水平方向上占用的空间大小，以像素计。包括元素的宽度、(可见的)垂直滚动条的宽度、左边框宽度和右边框宽度。 
  offsetLeft:元素的左外边框至包含元素的左内边框之间的像素距离。 
  offsetTop:元素的上外边框至包含元素的上内边框之间的像素距离。 
  
 而offsetParent属性就是对包含元素的引用(即定位父级),offsetParent 属性不一定与 parentNode 的值相等。offsetParent是指与当前元素最近的经过定位(position不等于static)的父级元素: 
  
  元素自身有fixed定位，offsetParent的结果为null 
  元素自身无fixed定位，且父级元素都未经过定位，offsetParent的结果为 
  元素自身无fixed定位，且父级元素存在经过定位的元素，offsetParent的结果为离自身元素最近的经过定位的父级元素 
  元素的parentNode是null 
  
 要想知道某个元素在页面上的偏移量，将这个元素的 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)，指的是元素内容及其内边距所占据的空间大小: 
  
  clientWidth 属性是元素内容区宽度加上左右内边距宽度 
  clientHeight 属性是元素内容区高度加上上下内边距高度 
  
     //确定视口大小
    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个相关属性: 
  
  scrollHeight:在没有滚动条的情况下，元素内容的总高度。 
  scrollWidth:在没有滚动条的情况下，元素内容的总宽度。 
  scrollLeft:被隐藏在内容区域左侧的像素数。通过设置这个属性可以改变元素的滚动位置。 
  scrollTop:被隐藏在内容区域上方的像素数。通过设置这个属性可以改变元素的滚动位置。
 在确定文档的总高度时(包括基于视口的最小高度时)，必须取得 scrollWidth/clientWidth 和 scrollHeight/clientHeight 中的最大值，才能保证在跨浏览器的环境下得到精确的结果: 
  
     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，所以这个方法不能在严格模式下使用。

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

访问元素的样式

1.DOM 样式属性和方法

2.计算的样式

操作样式表

改/增/删样式表规则

元素大小

偏移量

客户区大小

滚动大小

确定元素大小

你可能感兴趣的:(dom总结:DOM2和DOM3中样式部分)