JavaScript脚本化CSS

怼烎@ 2023-06-08 04:42 13阅读 0赞

## 行内样式和计算样式 ##

**元素节点.style：获取的是行内样式表**

1.  一般使用行内样式表来设置某些css属性
2.  含有连词符的css属性，需要使用小驼峰写法
3.  float是js里面的保留字，一般使用cssFloat

var box = document.getElementById("box");
    console.log(box.style.height);

**window.getComputedStyle(dom,null) IE8及以上，获取的是计算样式（conputed面板，属性名和属性值组成的对象）**

1.  一般计算样式表用来获取css属性
2.  null可以换成after或者before这样能够获取伪元素的计算样式表

console.log(window.getComputedStyle(box,"after").height);

**dom.currentStyle IE8以下，获取计算样式表**

console.log(box.currentStyle[height]);

## 获取计算样式兼容写法 ##

## 元素的显示尺寸 ##

**获取元素的显示尺寸，只能读不能设置**

1.  dom.clientWidth\_\_\_\_width+左右的padding
2.  dom.clientHeight\_\_\_\_height+上下的padding
3.  dom.offsetWidth\_\_\_\_width+左右的padding+上下的border
4.  dom.offsetHeight\_\_\_\_height+上下的padding+上下的border

**当dom的内容超过dom的尺寸时**

1.  dom.scrollWidth\_\_\_\_获取dom的内容宽度
2.  dom.scrollHeight\_\_\_\_获取dom的内容高度

var box = document.getElementById("box");
    console.log(box.scrollHeight);

## 元素的位置 ##

**获取元素的位置，只能读取不能设置**

1.  dom.offsetParent\_\_\_\_获取dom的定位父级
2.  dom.offsetLeft\_\_\_\_获取dom到定位父级的水平距离
3.  dom.offsetTop\_\_\_\_获取dom到定位父级的竖直距离
4.  dom.clientLeft\_\_\_\_获取dom左边框的宽度
5.  dom.clientTop\_\_\_\_获取dom上边框的宽度
6.  dom.scrollLeft\_\_\_\_获取dom里面的内容的水平滚动距离
7.  dom.scrollTop\_\_\_\_获取dom里面的内容的垂直滚动距离

## 窗口的尺寸 ##

**IE8以上**  
window.innerWidth：获取浏览器窗口的宽度值  
window.innerHeight：获取浏览器窗口的高度值

**IE8以下**

标准模式：  
document.documentElement.clientWidth  
document.documentElement.clientHeight

怪异模式：  
document.body.clientWidth  
document.body.clientHeight

**兼容性写法**

function getViewportOffset(){ 
    	if(window.innerWidth){ //IE8以上
    		return{ 
    			w:window.innerWidth,
    			h:window.innerHeight
    		}
    	}else{ //IE8以下
    		if(document.compatMode=="backCompat"){ //判断是否为怪异模式
    			return { //怪异模式
    				w:document.body.clientWidth,
    				h:document.body.clientHeight
    			}
    		}else{ //标准模式
    			return { 
    				w:document.documentElement.clientWidth,
    				h:document.documentElemnet.clientHeight
    			}
    		}
    	}
    }

## 窗口的滚动距离 ##

**IE8以上**  
window.pageYOffset：获取浏览器窗口Y轴滚动距离  
window.pageXOffset：获取浏览器窗口X轴滚动距离

**IE8以下**  
document.documentElement.scrollLeft  
document.documentElement.scrollTop

document.body.scrollLeft  
document.body.scrollTop

在IE8以下兼容性比较混乱，可以使用两个值相加，因为这两个值是不能同时存在的

**兼容性写法**

function getScrolllOffset(){ 
    	if(window.pageXOffset==0||window.pageXOffset){ //IE8以上
    		return { 
    			x:window.pageXOffset,
    			y:window.pageYOffset
    		}
    	}else{ //IE8以下
    		return { 
    			x:document.documentElement.scrollLeft+document.body.scrollLeft,
    			y:document.documentElement.scrollTop+document.body.scrollTop
    		}
    	}
    }