不用jQuery,怎么取到position:fixed的top, bottom, left, right的值?

Question

• HTML

<div class="fixed"></div>

• CSS

.fxied {
    position:fixed;
    top:100px;
    left:100px;
}

• 请问不用其他框架怎么取到top:100px left:100px这两个值?

Answer 1

https://developer.mozilla.org...

getComputedStyle(document.querySelector('.fixed')).left

https://jsbin.com/gahifazubu/...

Answer 2

getComputedStyle 还有兼容性问题，前来补充。
http://www.zhangxinxu.com/wor...

除此之外，还有个 getBoundingClientRect 返回元素的大小及其相对于视口的位置。
https://developer.mozilla.org...

Answer 3

Answer 4

封装一个函数

function getStyle(obj,name){
    if(obj.currentStyle){
        return obj.currentStyle[name];
    }else{
        return getComputedStyle(obj,false)[name];
    }
}

obj:指的是你要获取的对象，name指的是obj身上的样式

Answer 5

getBoundingClientRect