jaksgfdshkv

高级动画

在设计页面时可能经常会用到固定层的位置，这就需要获取一些html对象的坐标以更灵活的设置目标层的坐标，这里可能就会用到document .body.scrollTop等属性，但是此属性在xhtml标准网页或者更简单的说是带<!DOCTYPE ..>标签的页面里得到的结果是0，如果不要此标签则一切正常，那么在html页面怎么获得body的坐标呢，当然有办法-使用document .documentElement来取代document .body,可以这样写

var scrollTop = document.documentElement.scrollTop  || document.body.scrollTop;

总结： 1、document.documentElement.scrollTop标准模式下

          2、document.body.scrollTop非标准模式下

标准模式： <!DOCTYPE html> 

document.documentElement.scrollTop与 document.body.scrollTop始终有一个为0;

样式计算属性

是一个可以获取当前元素所有最终使用的CSS属性值。返回的是一个CSS样式声明对象

语法:

([object CSSStyleDeclaration])，只读。

高级用法（了解）

var style = window.getComputedStyle("元素", "伪类");

var dom = document.getElementById("test"),

style = window.getComputedStyle(dom , ":after");

getComputedStyle方法获取的是最终应用在元素上的所有CSS属性对象（即使没有CSS代码，也会把默认的祖宗八代都显示出来）；而element.style只能获取元素style属性中的CSS样式。因此对于一个光秃秃的元素<p>，getComputedStyle方法返回对象中length属性值（如果有）就是190+(据我测试FF:192, IE9:195, Chrome:253, 不同环境结果可能有差异), 而element.style就是0。

getComputedStyle与currentStyle

Ie下的使用,currentStyle属性不支持伪类样式获取

getPropertyValue方法

getPropertyValue方法，获取样式结果键值对

直接使用键值访问，其实也是可以的。但是，比如这里的的float，如果使用键值访问，则不能直接使用getComputedStyle(element, null).float，而应该是cssFloat与styleFloat，自然需要浏览器判断了，比较折腾！

使用getPropertyValue方法不必可以驼峰书写形式（不支持驼峰写法），例如：style.getPropertyValue("border-top-left-radius");

兼容性:getPropertyValue方法IE9+以及其他现代浏览器都支持

posted on 2021-12-12 17:39  jaksgfdshkv  阅读(68)  评论(0)  编辑  收藏  举报

导航