Javascript元素样式相关属性

最新推荐文章于 2024-05-28 17:36:50 发布

1900's 88 keys

最新推荐文章于 2024-05-28 17:36:50 发布

阅读量754

点赞数 3

分类专栏：正在路上的前端攻城狮的烂笔记 # JavaScript 文章标签： javascript css css3

本文链接：https://blog.csdn.net/weixin_45660621/article/details/121721750

版权

正在路上的前端攻城狮的烂笔记同时被 2 个专栏收录

90 篇文章 2 订阅

订阅专栏

JavaScript

58 篇文章 4 订阅

订阅专栏

通过JS修改元素的样式

style属性

语法：元素.style.样式名 = 样式值
如果CSS的样式中含有-，例如：background-color,这种在JS中是不合法的，需要将这种样式名修改为驼峰命名法
去掉-，第二个首字母大写如：backgroundColor
通过style属性设置的和读取都是内联样式
无法读取样式表中的样式
内联样式有较高的优先级，所以通过JS修改的样式会立即显示
如果在样式中写了!important,则此时样式会有最高的优先级，即使通过JS也不能覆盖该样式，此时将会导致JS修改样式失效

    <style>
        div{
            background-color: lightblue;
            width: 200px;
            height: 200px;
            margin: 10px;
        }
    </style>
<body>
    <div></div>
    <div class="box"></div>
    <script>
        var box = document.querySelector('.box');
        //修改第二个盒子的宽、高、背景色
        box.style.width = "300px";
        box.style.height = "300px";
        box.style.backgroundColor ="orangered";
    </script>
</body>

在这里插入图片描述

currentStyle

currentStyle获取当前正在显示的样式
语法：元素.currentStyle.样式名
如果获取的样式没有设置，则会返回默认值
通过该属性读取到的样式只能读，不能修改，如果要修改必须通过style属性
只有IE浏览器支持，其他浏览器不支持

    <style>
        div {
            background-color: lightblue;
            width: 200px;
            height: 200px;
            margin: 10px;
        }
    </style>
<body>
    <div></div>
    <div class="box"></div>
    <script>
        var box = document.querySelector('.box');
        box.style.backgroundColor = "orangered";
        console.log(box.currentStyle.backgroundColor);
    </script>
 </body>

在这里插入图片描述

getComputedStyle()

getComputedStyle()这个方法来获取元素当前的样式
需要两个参数：
- 第一个，要获取样式的元素
- 第二个，可以传递一个伪元素或者null
给方法会返回一个对象，对象中封装了当前元素对应的样式,可以通过对象.样式来读取样式
如果获取的样式没有设置，则会获取当真实值，而不是默认值
比如：没有设置width,它不会获取到auto,而是一个具体的长度
获取色彩返回的是RGB值
通过该方法读取到的样式只能读，不能修改，如果要修改必须通过style属性
IE8及以下不支持改方法

    <style>
        div {
            background-color: lightblue;
            width: 200px;
            height: 200px;
            margin: 10px;
        }
    </style>
<body>
    <div></div>
    <div class="box"></div>
    <script>
        var box = document.querySelector('.box');
        box.style.backgroundColor = "orangered";
        var obj = getComputedStyle(box,null);
        console.log(obj.backgroundColor);
    </script>
</body>

在这里插入图片描述

两种方法兼容写法

  function getStyle(obj, name){
      if(window.getComputedStyle){
          //正常浏览器的方式
          return getComputedStyle(obj, null)[name];
      }
      else{
          //IE8及以下的方式
          return obj.currentStyle[name];
      }
  }

clientWidth和clientHeight

clientWidth和clientHeight
这两个属性可以获取元素的可见宽度和高度
这些属性是不带px的，返回都是一个数字，可以直接进行计算
获取的元素宽度和高度，包括内容区域和内边距
这些属性只能读元素宽高，不能修改

    <style>
        div {
            background-color: lightblue;
            width: 200px;
            height: 300px;
            padding: 10px;
        }
    </style>
<body>
    <div></div>
    <script>
        var div = document.querySelector('div');
        console.log(div.clientWidth);
        console.log(div.clientHeight);
    </script>
</body>

在这里插入图片描述

offsetWidth

offsetWidth属性获取元素的整个宽度和高度，包括内容去、内边距和边框

offsetParent

offsetParent属性可以用来获取当前元素的定位父元素
会获取到离当前元素最近的开启了定位的祖先元素
如果所有的祖先元素没有开启定位，则返回body

<body>
    <div id="box1" style="position: relative;">
        <div id="box2">
            <div id="box3"></div>
        </div>
    </div>
    <script>
        var div = document.querySelector('#box3');
        console.log(div.offsetParent.id);
    </script>
</body>

在这里插入图片描述

offsetLeft和offsetTop

offsetLeft属性获取当前元素相对于其定位父元素的水平偏移量
offsetTop属性获取当前元素相对于其定位父元素的垂直偏移量

<body>
    <div id="box1" style="position: relative; padding: 20px;">
        <div id="box2">
            <div id="box3"></div>
        </div>
    </div>
    <script>
        var div = document.querySelector('#box3');
        console.log(div.offsetLeft);
        console.log(div.offsetTop);
    </script>
</body>

在这里插入图片描述

scorllHeight和scorllWidth

可以获取元素整个滚动区域的高度和宽度

scorllTop和scorllLeft

scorllLeft可以获取水平滚动条移动的距离
scorllTop可以获取垂直滚动条移动的距离
当满足scorllHeight - scorllTop == clientHeight,说明垂直滚动条到底了
当满足scorllWidth - scorllLeft == clientWidth,说明垂直滚动条到底了(可以用来做用户已阅读的功能）

onscroll

该事件会在元素滚动条滚动时触发

当垂直滚动条到底使表单可用

效果：
在这里插入图片描述

代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #info {
            width: 300px;
            height: 500px;
            overflow: scroll;
            background-color: aquamarine;
        }
    </style>
</head>

<body>
    <h3>欢迎用户注册</h3>
    <p id="info">
        亲爱请你仔细阅读 Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque esse eaque quidem omnis magni, pariatur
        numquam quasi repellat consequatur. Quibusdam tempora provident nam nostrum, exercitationem earum voluptatum
        neque labore sed.
        Aliquam laudantium ex, temporibus ea id asperiores atque officiis cumque possimus in suscipit quidem eius minima
        alias quasi provident quod esse sint ullam obcaecati! Deserunt mollitia esse assumenda repellat quam!
        Perspiciatis omnis pariatur vel dolorem. Optio magni minus eligendi quidem sapiente fugiat laborum inventore,
        impedit alias nam porro? Eius dolore doloremque itaque qui consequatur debitis sint. Consequatur nemo non
        dignissimos!
        Sint ipsam ipsum, saepe vero exercitationem, repellat expedita, ea alias eaque vel vitae quasi sed eveniet
        dolore voluptas architecto inventore error pariatur natus facilis eos quod soluta provident? Enim, suscipit.
        Dolorum amet atque iusto doloremque dolore non odio nisi vitae explicabo magni voluptates quos, at veniam ex
        quidem vel adipisci, soluta dolor. Repellat expedita soluta voluptatem sapiente vitae molestiae ipsam?
        Accusantium ratione facere consectetur! Aut, facilis. Saepe odio rerum ducimus sapiente cumque impedit, unde
        recusandae veritatis sit dolor at praesentium provident alias explicabo officiis ad pariatur necessitatibus
        error voluptates numquam.
        Unde nisi impedit veritatis porro omnis nam ullam quasi, temporibus repudiandae! Nemo excepturi possimus beatae
        et libero sunt vitae! Veritatis sequi beatae tempora molestiae veniam a maxime consequuntur ipsum tenetur?
        Numquam culpa corrupti architecto sequi eos labore excepturi, harum voluptatibus ducimus magni molestias,
        laboriosam aperiam ab quam perferendis dolorem nesciunt possimus accusantium, consequuntur cum voluptates cumque
        temporibus minima! Beatae, impedit!
        Odio necessitatibus cum voluptate voluptatibus optio corrupti obcaecati, reiciendis sunt deserunt voluptas ab et
        saepe laudantium itaque? Fugiat, officiis ullam enim quidem omnis autem, accusantium natus asperiores labore
        eius quis.
        Deleniti rem laudantium nostrum doloribus velit ab vel numquam amet aut veniam. Labore delectus assumenda minima
        maxime, quis, eligendi veniam dolore impedit dolor ea fuga dolorum ad soluta natus animi.
        Quasi maiores nesciunt ad inventore esse magnam? Molestias repellat corporis quaerat dolor neque iure eum
        architecto quisquam quas doloremque ratione velit nisi possimus deleniti, quae praesentium! Iste possimus ipsam
        reprehenderit.
        Animi, ut sequi tempora, magnam deleniti expedita amet dolorum possimus nostrum repellat quaerat rerum. Soluta
        natus sit quibusdam est eaque nostrum doloribus doloremque modi! Odit, praesentium explicabo. Earum, error
        accusamus?
        Cupiditate dolor nostrum doloremque harum nam in perspiciatis, iure optio totam, quisquam adipisci. Temporibus
        animi, delectus veritatis laudantium maxime, aliquid aperiam impedit saepe dolorum, eaque excepturi. Accusantium
        hic nemo modi.
        santium quibusdam. Illum eligendi impedit provident!
    </p>
    <input type="checkbox" disabled="disabled">我已仔细阅读，一定遵守
    <input type="submit" disabled="disabled" value="注册">
    <script>
        var info = document.querySelector('#info');
        console.log(info);
        var inputs = document.getElementsByTagName('input');
        console.log(inputs);
        info.onscroll = function () {
            //检查垂直滚动条是否滚动到底
            if (info.scrollHeight - info.scrollTop == info.clientHeight) {
                inputs[0].disabled = false;
                inputs[1].disabled = false;
            }
        }
    </script>
</body>
</html>

1900's 88 keys

关注

3
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Javascript元素样式相关属性

目录通过JS修改元素的样式style属性currentStylegetComputedStyle()两种方法兼容写法clientWidth和clientHeightoffsetWidthoffsetParentoffsetLeft和offsetTopscorllHeight和scorllWidthscorllTop和scorllLeftonscroll当垂直滚动条到底使表单可用通过JS修改元素的样式style属性语法：元素.style.样式名 = 样式值如果CSS的样式中含有-，例如：backgr
复制链接

扫一扫

专栏目录