2022-04-13 JavaScript 样式的获取和修改

对马导致昏（）

我们知道DOM可以访问网页中的元素，并且可以对其进行增删改查的操作。但是DOM的强大之处远不止于此，除了访问修改节点中的内容，DOM还能访问和修改对应节点的样式。比如一个div之前是200px 红色的，在我们按下鼠标之后它就变成了300px 蓝色的，这样的效果就可以通过DOM来实现。

1.获取样式

语法一：元素.style.样式名
语法二：元素.style["属性"]

这种方式不仅可以获取到元素的样式，还可以设置元素的样式。

box1.style.width = "300px";
box1.style.backgroundColor = "red";

这里要注意，设置的样式都是以字符串的形式添加的，并且长度和宽度等是需要加上px的。第二个值得注意的点，在设置背景颜色的时候，是采用的backgroundColor而不是我们设置CSS时的background-color，因为后者在JavaScript中时不合法的，所有类似的写法都需要改写成前者那样的驼峰书写法。
通过style对象获取和设置样式的方法快捷方便，但是有一个缺点，就是它访问和操作的始终是行内样式，而我们习惯上书写的一般是内联样式或者外联样式，这两种样式style对象是无法访问的。这里就需要另外一种方式来获取到元素当前正在显示的样式。
获取当前正在显示的样式

let obj = getComputedStyle(box, null);
obj.currentStyle[style];

第一行是W3C推荐的获取当前样式的方法，大部分浏览器都支持。第二行则是IE8及以下的浏览器支持的写法，因为它们不支持W3C推荐的写法。为了让代码兼容尽可能多的浏览器，需要采用兼容写法。
兼容写法的核心思路就是，获取前先判断浏览器中到底支持哪一种写法，支持哪一种就返回哪一种对应的样式。

        function getStyle(obj, style) {
            if (window.getComputedStyle) {//正常的浏览器
                return getComputedStyle(obj, null)[style];
            }
            return obj.currentStyle[style];//IE 浏览器
        }

获取当前元素显示的样式是只读模式的，也就是说，这两种方法是不能对样式进行修改的。

2.样式相关的其他属性

这里主要介绍JavaScript中的动画三大家族：client offset scroll

1. client
   client表示的是可视区域的意思，也就是一个元素中能被我们看到的地方。主要包含两个要素.

• clientWidth 返回元素可视区域的宽度 clientWidth = padding + width
• clientHeight 返回元素可视区域的高度 clientHeight = padding + height

2. offset

• offsetWidth 在clientWidth的基础上增加边框的宽度
• offsetHeight 在clientHeight的基础上增加边框的宽度
• offsetParent 获取当前元素的定位父元素，逐层向上纸质找到有定位的父元素，都无定位则返回body
• offsetLeft 当前元素相较于其定位父元素的水平偏移量
• offsetTop 当前元素相较于其定位父元素的垂直偏移量
  这里后面三个属性都是相对于定位父元素而言的，而不是距离当前元素最近的父元素。所以这也提醒我们，要使用这三个属性的时候，记得给父元素开启定位。

3. scroll
   scroll就是滚动的意思，常见的就是网页中的一些子元素的内容溢出了父元素，所以我们添加一个滚顶条来防止溢出的同时保持内容的完整性。

• scrollHeight 表示整个滚动区域的高度 这个高度应该是子元素的，因为子元素是溢出的。
• scrollWidth 表示整个滚动区域的宽度
• scrollTop 表示竖向滚顶条滚动的距离
• scrollLeft 表示水平滚动条滚动的距离
  关于scroll有一个巧妙的用法，综合client和offset来看。我们发现当scrollHeight - scrollTop的值等于clientHeight的时候，对应的情况正好是滚动条滚动到底了！利用这样的特性，我们可以强制让用户阅读完滚动区域的所有内容，然后在解锁页面的某些功能。

3.举例 注册协议

    
    
    
    


请阅读协议后注册

    请在完成协议的阅读之后再注册，非完整阅读协议不能进行注册
    请在完成协议的阅读之后再注册，非完整阅读协议不能进行注册
    请在完成协议的阅读之后再注册，非完整阅读协议不能进行注册
    请在完成协议的阅读之后再注册，非完整阅读协议不能进行注册
    请在完成协议的阅读之后再注册，非完整阅读协议不能进行注册
    请在完成协议的阅读之后再注册，非完整阅读协议不能进行注册
    请在完成协议的阅读之后再注册，非完整阅读协议不能进行注册
    请在完成协议的阅读之后再注册，非完整阅读协议不能进行注册
    请在完成协议的阅读之后再注册，非完整阅读协议不能进行注册
    请在完成协议的阅读之后再注册，非完整阅读协议不能进行注册
    请在完成协议的阅读之后再注册，非完整阅读协议不能进行注册
    请在完成协议的阅读之后再注册，非完整阅读协议不能进行注册
    请在完成协议的阅读之后再注册，非完整阅读协议不能进行注册
    请在完成协议的阅读之后再注册，非完整阅读协议不能进行注册
    请在完成协议的阅读之后再注册，非完整阅读协议不能进行注册
    请在完成协议的阅读之后再注册，非完整阅读协议不能进行注册
    请在完成协议的阅读之后再注册，非完整阅读协议不能进行注册
    请在完成协议的阅读之后再注册，非完整阅读协议不能进行注册
    请在完成协议的阅读之后再注册，非完整阅读协议不能进行注册
    请在完成协议的阅读之后再注册，非完整阅读协议不能进行注册
    请在完成协议的阅读之后再注册，非完整阅读协议不能进行注册
    请在完成协议的阅读之后再注册，非完整阅读协议不能进行注册
    请在完成协议的阅读之后再注册，非完整阅读协议不能进行注册
    请在完成协议的阅读之后再注册，非完整阅读协议不能进行注册
    请在完成协议的阅读之后再注册，非完整阅读协议不能进行注册
    请在完成协议的阅读之后再注册，非完整阅读协议不能进行注册
    请在完成协议的阅读之后再注册，非完整阅读协议不能进行注册
    请在完成协议的阅读之后再注册，非完整阅读协议不能进行注册
    请在完成协议的阅读之后再注册，非完整阅读协议不能进行注册
    请在完成协议的阅读之后再注册，非完整阅读协议不能进行注册
    请在完成协议的阅读之后再注册，非完整阅读协议不能进行注册
    请在完成协议的阅读之后再注册，非完整阅读协议不能进行注册
    请在完成协议的阅读之后再注册，非完整阅读协议不能进行注册
    请在完成协议的阅读之后再注册，非完整阅读协议不能进行注册
    请在完成协议的阅读之后再注册，非完整阅读协议不能进行注册
    请在完成协议的阅读之后再注册，非完整阅读协议不能进行注册
    请在完成协议的阅读之后再注册，非完整阅读协议不能进行注册
    请在完成协议的阅读之后再注册，非完整阅读协议不能进行注册
    请在完成协议的阅读之后再注册，非完整阅读协议不能进行注册
    请在完成协议的阅读之后再注册，非完整阅读协议不能进行注册
    请在完成协议的阅读之后再注册，非完整阅读协议不能进行注册
    请在完成协议的阅读之后再注册，非完整阅读协议不能进行注册
    请在完成协议的阅读之后再注册，非完整阅读协议不能进行注册
    请在完成协议的阅读之后再注册，非完整阅读协议不能进行注册
    请在完成协议的阅读之后再注册，非完整阅读协议不能进行注册
    请在完成协议的阅读之后再注册，非完整阅读协议不能进行注册

我已阅读完毕协议

我们给滚动条绑定了一个事件响应函数，该函数会在滚动条到底的时候解锁页面的某些功能。而判断这个滚动到底的条件就是我们说的利用scroll和client，这里之所加上了取整parseInt，因为我发现直接在浏览器中拉动调试的时候会有一些极小的偏差，为了不影响正常的功能舍去这些小数。