1、window.getComputedStyle方法
功能：获取最终应用在元素身上的样式
语法： getComputedStyle("元素", "伪元素")，第二个参数可选
返回值：元素的样式对象
IE6-8不支持该属性，有个对应属性currentStyle。
与style的区别：style只能拿到元素style属性中的样式信息，getComputedStyle可以拿到任意属性/值的集合，与getPropertyValue配合使用就可以拿到任意属性值。
Tip:jquery/zepto的css方法拿不到伪元素样式，但该方法可以！！
2、Element.getBoundingClientRect方法
功能：相对于视口，获取指定元素size和position
语法：element.getBoundingClientRect()
返回值：包含bottom,height,left,right,top,width,x,y的对象(Chrome下)，基准点是视口左上角。
Tip:当Element被display:none后，返回的所有属性都为0
3、Object.assign方法
语法：Object.assign(target, ...sources)，返回target对象，将sources中所有可枚举属性赋值到target对象，但是只是浅复制，即复制引用，看下列子：
function test() {
'use strict';
let obj1 = { a: 0 , b: { c: 0}};
let obj2 = Object.assign({}, obj1);
console.log(JSON.stringify(obj2)); // { a: 0, b: { c: 0}}
obj1.a = 1;
console.log(JSON.stringify(obj1)); // { a: 1, b: { c: 0}}
console.log(JSON.stringify(obj2)); // { a: 0, b: { c: 0}}
obj2.a = 2;
console.log(JSON.stringify(obj1)); // { a: 1, b: { c: 0}}
console.log(JSON.stringify(obj2)); // { a: 2, b: { c: 0}}
obj2.b.c = 3;
console.log(JSON.stringify(obj1)); // { a: 1, b: { c: 3}}
console.log(JSON.stringify(obj2)); // { a: 2, b: { c: 3}}
// 深度复制
obj1 = { a: 0 , b: { c: 0}};
let obj3 = JSON.parse(JSON.stringify(obj1));
obj1.a = 4;
obj1.b.c = 4;
console.log(JSON.stringify(obj3)); // { a: 0, b: { c: 0}}
}
test();
注意：Object.assign()方法是浅复制，使用时要注意这点
4、scrollIntoView & scrollIntoViewIfNeed
- scrollIntoView(param)
<body>
<div class="chunk"></div>
<div class="btn">click</div>
<script>
const btn = document.querySelector('.btn');
const test = document.querySelector('.chunk');
btn.addEventListener('click', function() {
test.scrollIntoView();
})
</script>
</body>
param可取boolean和object，当为Boolean时，取true（默认值）与可视区域顶部对齐；当object时，可设置两个key，一个block，取值为start/end，功能类似于取Boolean，另一个behavior，取值instant(auto)/smooth；兼容性有限！
- scrollIntoViewIfNeed
scrollIntoViewIfNeeded是比较懒散的，如果元素在可视区域，那么调用它的时候，页面是不会发生滚动的。其次是scrollIntoViewIfNeeded只有Boolean型参数，也就是说，都是瞬间滚动
网友评论