【JavaScript】脚本化CSS & 滚动设置

获取 CSS 样式

获取元素的所有样式属性（只读）

1. [window.]getComputedStyle(ele[, pseudoElt]).att / ['att']
ele - 用于获取计算样式的元素
   pseudoElt - 指定要匹配的伪元素；必须对普通元素省略 / null

let style = getComputedStyle(box, null);
console.log(typeof style); // object
console.log(typeof style.height); // string -- 以字符串形式返回属性值

. 获取的属性名要符合标识符规范。所以有连字符的属性名要写成小驼峰

getComputedStyle(oDiv).backgroundColor;
oDiv.currentStyle.backgroundColor;

[] 内写的是字符串，所以可以保留连字符

getComputedStyle(oDiv)['background-color'];
oDiv.currentStyle['background-color'];

demo 1

<div id="box"></div>

#box {
    width: 100px;
}

#box::after {
    content: '';
    display: block;
    width: 60px;
}

获取元素节点的属性：

let w = parseInt(getComputedStyle(box).width);
console.log(w); // 100

获取伪元素的属性：

let w = parseInt(getComputedStyle(box, 'after').width);
console.log(w); // 60

demo 2

这样，我们就可以获取元素节点的 CSS 样式，并修改行内样式：

<div id="box"></div>
<script>
    let oBox = document.getElementById('box');
    let wid = parseInt(getComputedStyle(oBox).width); // 获取 CSS 样式

    oBox.onclick = function () {
        wid += 20;
        console.log(wid);
        oBox.style.width = wid + 'px'; // 修改行内样式
    }
</script>

offset

盒子的大小

1. ele.offsetWidth：width + 左右padding + 左右border
2. ele.offsetHeight：height + 上下padding + 上下border

• 没有兼容问题

盒子的位置

1. ele.offsetLeft：该元素左边框外，到自己的 offsetParent 对象的左边框内的距离
2. ele.offsetTop：该元素上边框外，到自己的 offsetParent 对象的下边框内的距离

• 兼容性较差

元素的 offsetParent 对象

• 离自己最近的、定位的祖先元素。最后的父级为 body

op.offsetParent // 查找离自己最近的定位父级

demo：封装 getElementPosition() 函数，获取元素相对于文档的坐标

function getElePos(dom) {
    let x = dom.offsetLeft + dom.clientLeft; // 水平距离 + 左边框
    let y = dom.offsetTop + dom.clientTop; // 竖直距离 + 上边框
    let parent = dom.offsetParent; // 父级

    while (parent) { // 有父级的话
        x += parent.offsetLeft + parent.clientLeft; // 父级的水平距离 + 左边框
        y += parent.offsetTop + parent.clientTop; // 父级的竖直距离 + 上边框
        parent = parent.offsetParent; // 再取父级
    }
    return { x: x, y: y };
}

client

盒子的大小

1. ele.clientWidth：width + 左右padding
2. ele.clientHeight：height + 上下padding

• 如果盒子没有高度，可以用文字撑起 height

盒子的边框

1. dom.clientTop：上边框线的宽度
2. dom.clientLeft：左边框线的宽度

• 与 parseInt(getComputedStyle(box).borderTopWidth) 等效，所以使用得比较少

对于元素

获取宽高

当元素实际内容 > 设置的宽高时

1. dom.scrollWidth → 元素实际内容的 width
2. dom.scrollHeight → 元素实际内容的 height

获取 / 设置滚动距离

滚动距离：在显示页面上方的距离

1. dom.scrollTop [获取] / [设置] 一个元素的内容垂直滚动的像素数
2. dom.scrollLeft [获取] / [设置] 一个元素的内容水平滚动的像素数

• 到元素底部的距离：dom.scrollHeight - parseInt(getComputedStyle(dom).height) - dom.scrollTop

对于页面

页面的滚动有兼容问题

获取宽高

1. window.innerWidth 窗口的宽度（包含滚动条）
2. window.innerHeight 窗口的高度（包含滚动条）

获取滚动距离

1. window.scrollX / window.pageXOffset 页面滚动的水平距离
2. window.scrollY / window.pageYOffset 页面滚动的竖直距离

设置滚动

可以用于设置 [元素] / [页面] 的滚动

element.scrollTo() 滚动到指定位置

1. element.scrollTo(x-coord, y-coord)：

window.scrollTo(0, 100);

2. element.scrollTo(options)：

window.scrollTo({
    top: 100,
    left: 100,
    behavior: 'smooth'
});

element.scrollBy() 滚动指定距离

1. element.scrollBy(x-coord, y-coord)：

window.scrollBy(0, 100);

2. element.scrollBy(options)：

window.scrollBy({
    top: 100,
    left: 0,
    behavior: 'smooth'
});

element.scrollIntoView()：滚动 element 的父容器，使 element 对用户可见

1. element.scrollIntoView()：

element.scrollIntoView(); // 使 [element 的顶端] 与 [其父容器的顶端] 对齐
window.scrollIntoView(false); // [元素的底端] 与 [其所在滚动区域的可视区域的底端] 对齐

2. element.scrollIntoView(alignToTop)：
   behavior：定义动画过渡效果 - auto(默认、smooth
block：定义垂直方向的对齐 - start(默认)、center、end、nearest
inline：定义水平方向的对齐 - start、center、end、nearest(默认)

window.scrollIntoView({ 
    block: "end",
    behavior: "smooth"
});