获取窗口属性，获取dom尺寸，脚本化CSS

文章目录

1. 查看滚动条的滚动距离
2. 查看视口的尺寸
3. 查看元素的几何尺寸
4. 让滚动条滚动
5. 脚本化CSS

1，dom.style.prop -->读写CSS行间样式
2， window.getComputedStyle(ele,null)-->获取当前元素一切css展示的显示值

6. 一个案例让小方块运动

1. 查看滚动条的滚动距离

在这里插入图片描述
window.pageXOffset/pageOffset(IE9以上可以用）
得到的数值就是（横向或者竖直）滚动条滚动的距离。
那么解决IE9以下不兼容就用document.body.scrollLeft/scrollTop或者documentElement.scrollLeft/scrollTop
(document.body.scrollLeft/scrollTop如果有值，那么documentElement.scrollLeft/scrollTop一定为0)

解决不兼容问题：
function getScrollOffSet () {
	if(window.pageOffset) {
		return {
	    	x : window.pageXOffset,
	    	y : window.pageYOffset
	    }
	}else{
		return {
	    	x : document.body.scrollLeft + documentElement.scrollLeft,
	    	y : document.body.scrollTop + documentElement.scrollTop
	    }
	}
}

2. 查看视口的尺寸

在这里插入图片描述

浏览器的渲染模式：标准模式和怪异模式（混杂模式）
html上加上<!DOCTYPE html>就是启动标准模式
html上不加<!DOCTYPE html>就是启动怪异模式，比如如果IE7启动了怪异模式，那么它的渲染语法规则就是IE6的语法

查看浏览器处于什么模式document.compatMode//css1Compat（标准模式）/BackCompat（怪异模式）

解决不兼容问题：
function getViewPortOffset () {
    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. 查看元素的几何尺寸

1,
在这里插入图片描述

<div style = "width : 100px; height:100px; background-color: red; position: absolute;left: 100px; top: 100px;"></div>

-------------------------------------------------------
var div = document.getElementsByTagName('div')[0];
console.log(div.getBoundingClientRect());

在这里插入图片描述
2,

4. 让滚动条滚动

在这里插入图片描述

5. 脚本化CSS

1，dom.style.prop -->读写CSS行间样式

在这里插入图片描述

（它是唯一一个可读写的方式，但是它只能作用于行间样式，就是说只能读出/写入行间样式的属性值）

 <style type = "text/css">
    div{
        width: 200px;
    }
 </style>
---------------------------------------------------------
<div style = " height: 100px;background-color: rgb(90, 80, 80); position:absolute;left: 0;top:0; "></div>
--------------------------------------------------------- 
var div = document.getElementsByTagName('div')[0];
console.log(div.style.width)//""为空

在这里插入图片描述

2， window.getComputedStyle(ele,null)–>获取当前元素一切css展示的显示值

在这里插入图片描述
getComputedStyle()第二个参数通常情况下为null,但是也可以放上伪元素，来获取它的伪元素的尺寸

 window.getComputedStyle(div,"after");//获取伪元素唯一的方法
console.log(window.getComputedStyle(div,"after").width)

因为window.getComputedStyle(ele,null)在IE8以下不兼容，所以又有一种方法是IE独有的ele.currentStyle，如下：
在这里插入图片描述

解决不兼容问题：
function getStyle(elem, prop) {
    if(window.getComputedStyle) {
        return window.getComputedStyle(elem,null)[prop];
    }else{
        return elem.currentStyle[prop];
    }
}

6. 一个案例让小方块运动

<div style = "width:100px; height: 100px;
    background-color: rgb(90, 80, 80); position:absolute;left: 0;top:0;
    "></div>    
------------------------------------------------------
function getStyle(elem, prop) {
    if(window.getComputedStyle) {
        return window.getComputedStyle(elem,null)[prop];
    }else{
        return elem.currentStyle[prop];
    }
}
var div = document.getElementsByTagName('div')[0];
var speed = 3;//speed的作用就是加个速
var time =  setInterval(function  () {
    speed += speed / 7;
     div.style.left = parseInt(getStyle(div,'left')) + speed + 'px';

     if(parseInt( div.style.left) > 500){
         clearInterval(time);
     }
},100)