DOM css的一些操作

1、查看滚动条的距离：

    ie9以上及其它浏览器
    window.pageXOffset / pageYOffset
    ie8以及ie8以下
    document.body.scrollLeft / top
    document.documentElement.scrollLeftutedStyle 读取样式，通过 element.style 修改样式

function getScrollOffset() {
            if (window.pageXOffset) {
                return {
                    x: window.pageXOffset,
                    y: window.pageYOffset,
                }
            } else {
                return {
                    x: document.body.scrollLeft + document.documentElement.scrollLeft,
                    y: document.body.scrollTop + document.documentElement.scrollTop
                }
            }
        }

2、浏览器可视区窗口尺寸：

window.innerWidth /window.innerHeight
ie8和ie8以下
ie标准模式如声明<!DOCTYPE html> 表示以h5文档
ie怪异模式（混杂模式）,html文档不带 <!DOCTYPE html> 使当前代码支持以前的浏览器版本

  //标准模式
document.documentElement.clientWidth;
document.documentElement.clientHeight;

//怪异模式
document.body.clientHeight;
document.body.clientWidth;
//如何判定现在是标准模式还是怪异模式：

//方法一：执行以下代码
alert(window.top.document.compatMode) ;
//BackCompat 表示怪异模式,
//CSS1Compat 表示标准模式

//方法二：jquery为我们提供的方法，如下：
alert($.boxModel)
alert($.support.boxModel)

封装的方法：

function getViewportOffst() {
            if (window.innerWidth) {
                return {
                    w: window.innerWidth,
                    h: window.innerHeight
                }
            } else {
                if (document.compatMode === "Backcompat") {
                    return {
                        w: document.body.clientWidth,
                        h: document.body.clientHeight
                    }
                } else {
                    return {
                        w: document.documentElement.clientWidth,
                        h: document.documentElement.clientHeight
                    }
                }
            }
        }

3、浏览器可视区窗口尺寸：

3.1获得页面中某个元素的左,上,右和下分别相对浏览器视窗的位置

getBoundingClientRect();
var box=document.getElementById('box');         // 获取元素
 alert(box.getBoundingClientRect().top);         // 元素上边距离页面上边的距离
 alert(box.getBoundingClientRect().right);       // 元素右边距离页面左边的距离
 alert(box.getBoundingClientRect().bottom);      // 元素下边距离页面上边的距离
 alert(box.getBoundingClientRect().left);        // 元素左边距离页面左边的距离

dom.offsetParent //返回最近有定位的父级元级

offsetWidth /offsetHeight 包含 padding的宽高，不含margin

offsetLeft /offsetTop //对于无定位父级的元素，返回相对文档的坐标，对有定位父级的元素，返回相对应于最近有定位的父级的坐标。

4、滚动条滚动：

window三个方法：

scroll();scrollTo();scrollBy();
用法都是讲x,y坐标传入，即实现让滚动条滚动到当前位置
区别：scrollBy()会在之前的基础上累加

5、使用 Dom 的 getComputedStyle 方法获取元素的样式：

5.1用法：

document.defaultView.getComputedStyle(element[,pseudo-element]);
window.getComputedStyle(element[,pseudo-element]);
首先是有两个参数，元素和伪类。第二个参数不是必须的，当不查询伪类元素的时候可以忽略或者传入 null。
使用示例：
let my_div = document.getElementById("myDiv");
let style = window.getComputedStyle(my_div, null);

关于 defaultView 引用一下 MDN 对于defaultView 的描述

在许多在线的演示代码中, getComputedStyle 是通过 document.defaultView 对象来调用的。大部分情况下，这是不需要的，因为可以直接通过window对象调用。但有一种情况，你必需要使用 defaultView, 那是在 Firefox 3.6 上访问子框架内的样式 (iframe).而且除了在 IE8 浏览器中 document.defaultView === window 返回的是 false 外，其他的浏览器（包括 IE9 ）返回的都是 true。所以后面直接使用 window 就好，不用在输入那么长的代码了。

5.2返回值：

getComputedStyle 返回的对象是 CSSStyleDeclaration 类型的对象。取数据的时候可以直接按照属性的取法去取数据，例如 style.backgroundColor。需要注意的是，返回的对象的键名是 css 的驼峰式写法，background-color -> backgroundColor。

　　需要注意的是 float 属性，根据《JavaScript 高级程序》所描述的情况，float 是 JS 的保留关键字。根据 DOM2 级的规范，取元素的 float 的时候应该使用 cssFloat。其实 chrome 和 Firefox 是支持 float 属性的，也就是说可以直接使用

var float_property = window.getComputedStyle.style; // chrome 和 Firefox支持

而在任何版本的 IE 中都不能这样使用，并且在 IE 8 中仅支持 styleFloat ，这个下面的兼容性问题中谈到。

5.3和style的异同：

getComputedStyle 和 element.style 的相同点就是二者返回的都是 CSSStyleDeclaration 对象，取相应属性值得时候都是采用的 CSS 驼峰式写法，均需要注意 float 属性。
而不同点就是：
element.style 读取的只是元素的“内联样式”，即写在元素的 style 属性上的样式；而 getComputedStyle 读取的样式是最终样式，包括了“内联样式”、“嵌入样式”和“外部样式”。　　
element.style 既支持读也支持写，我们通过 element.style 即可改写元素的样式。而 getComputedStyle 仅支持读并不支持写入。
我们可以通过使用 getComputedStyle 读取样式，通过 element.style 修改样式

猜你喜欢