js操作样式

DOM样式属性和方法：

 

指定的元素，它的style有这么几个属性和方法：

 

cssText：通过这个属性可以访问到元素的特性style设置的属性，并且可以直接赋值设置。

 

removeProperty（属性名称）：从样式中删除给定属性。

 

setProperty（属性名称，值，权重）：可以通过这个方法设置给定样式的同时设置其权重，可以传入”important”或者一个空字符串。

 

 

 

获取计算后样式：

 

window.getComputedStyle（需要获取样式的元素，伪元素字符串 ）：这个方法返回计算后的样式。（在ie中不支持这个方法，但是它每一个元素都有一个currentStyle属性，返回的和这个方法一样的结果）

 

元素的属性：

 

offsetHeight: 返回元素的高。包括元素的高度，水平滚动的高度，上下边框高度。

 

offsetWidth：返回元素的宽。包括元素的宽度，水平滚动的宽度，左右边宽宽度。

 

offsetLeft：返回元素左外边框至相对于最近已经定位的上级元素的左内边框之间的距离。

 

  offsetTop：返回元素上外边框至相对于最近已经定位的上级元素的上内边框之间的距离,

 

clientWidth：返回元素的宽。包括元素内容区域，左右内边距宽度。

 

clientHeight：返回元素的高，包括元素内容区域，上下内边距高度。（用在documnet.body或者document.documentElement元素上（具体哪个元素看浏览器的模式，在ie混杂模式下使用的是body）可以计算出视口的高）

 

 

滚动大小：

 

scrollHeight: 这个属性返回的是元素没有滚动条情况下的总高度。

 

scrollWidth: 这个属性返回的是元素在没有滚动条情况下的总宽度。

 

scrollLeft：被隐藏在内容区域的左侧的宽度，给这个属性赋值，可以改变元素的滚动位置。

 

scrollTop：被隐藏在内容区域上方的高度。设置整个页面的滚动通过设置html元素也就是document.documentElement。要在页面加载完dom以后执行，不然没有效果。

 

 

 

元素相对于视口的位置：

 

getBoundingClientRect: 每个元素都有这个方法，它返回一个矩形对象，包含四个属性：bottom，top，left，right。这些属性的值都是元素相对于视口的位置。