9.①通过js修改元素样式style②案例：超长协议：元素滚动事件onscroll他会在元素的滚动条滚动的时候触发③clientWidth；offsetWidth；scrollHeight；

最新推荐文章于 2024-06-01 14:57:49 发布
最新推荐文章于 2024-06-01 14:57:49 发布
阅读量453 收藏 1
点赞数
分类专栏： DOM 文章标签： css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lazylYYY/article/details/119616142
版权

目录

一:修改元素样式         元素.style.样式名 = 样式值

1.样式名通常可以直接写,但是如果样式名中带有-必须进行修改, 将-号去掉，-后的字母大写

 2.优先级小于 !improt  :通过style所修改的样式都是内联样式，所有修改完成后通常会立即生效

二:只读元素样式

         let aStyle = getComputedStyle(a);

               alert(aStyle.height)  //100px

三:获取到元素样式(高度)并参与计算

let countHeight = getComputedStyle(a).height

 alert(parseInt(countHeight) + 10 + 'px')

 四:获取其他只读样式(padiing和内文本;;;;;;;可见区域的) 获取的宽高不带单位,可以直接参与运算

1.盒子内部大小（内容区和内边距）☞padiing和内文本

        ①clientWidth        ②clientHeight

        ③event.clientX/Y是参照于视口获取的X/Y轴坐标

2.盒子可见框的大小（内容区、内边距和边框border）

        ①offsetWidth        ②offsetHeigh

3. ①offsetParent获取当前元素的定位父元素

                - 定位父元素是离当前元素最近的开启了定位的祖先元素，

                   如果所有的祖先元素都没有开启定位，则返回body

    ②offsetLeft 获取当前元素相对于其定位元素（offsetParent）的左侧偏移量

    ③offsetTop  获取当前元素相对于其定位元素（offsetParent）的上偏移量

    ④event.clientX/Y是参照于视口获取的X/Y轴坐标

4.获取元素可滚动区域的大小

        ①scrollHeight    获取对象可滚动的高度        ②scrollWidth     获取对象可滚动的宽度

5.获取元素已滚动的大小

        ①scrollTop      垂直已滚动        ②scrollLeft      水平已滚动

6.判断滚动条滚动到底

        ① 垂直：                scrollHeight - scrollTop === clientHeight        ② 水平：                scrollWidht - scrollLeft === clientWidth

五：案例：超长协议：监视滚动条

①onscroll 会在元素的滚动条滚动的时候触发    tiao.onscroll = function () {}

一:修改元素样式         元素.style.样式名 = 样式值

1.样式名通常可以直接写,但是如果样式名中带有-必须进行修改, 将-号去掉，-后的字母大写

             background-color --> backgroundColor

             border-left-width --> borderLeftWidth

 2.优先级小于 !improt  :通过style所修改的样式都是内联样式，所有修改完成后通常会立即生效

二:只读元素样式

         let aStyle = getComputedStyle(a);

               alert(aStyle.height)  //100px

三:获取到元素样式(高度)并参与计算

let countHeight = getComputedStyle(a).height

 alert(parseInt(countHeight) + 10 + 'px')

 四:获取其他只读样式(padiing和内文本;;;;;;;可见区域的) 获取的宽高不带单位,可以直接参与运算

1.盒子内部大小（内容区和内边距）☞padiing和内文本

        ①clientWidth
        ②clientHeight

        ③event.clientX/Y是参照于视口获取的X/Y轴坐标

2.盒子可见框的大小（内容区、内边距和边框border）

        ①offsetWidth
        ②offsetHeigh

3. ①offsetParent获取当前元素的定位父元素

                - 定位父元素是离当前元素最近的开启了定位的祖先元素，

                   如果所有的祖先元素都没有开启定位，则返回body

        

    ②offsetLeft 获取当前元素相对于其定位元素（offsetParent）的左侧偏移量

    ③offsetTop  获取当前元素相对于其定位元素（offsetParent）的上偏移量

    ④event.clientX/Y是参照于视口获取的X/Y轴坐标

4.获取元素可滚动区域的大小

        ①scrollHeight    获取对象可滚动的高度
        ②scrollWidth     获取对象可滚动的宽度

5.获取元素已滚动的大小

        ①scrollTop      垂直已滚动
        ②scrollLeft      水平已滚动

6.判断滚动条滚动到底

        ① 垂直：                scrollHeight - scrollTop === clientHeight
        ② 水平：                scrollWidht - scrollLeft === clientWidth

五：案例：超长协议：监视滚动条

①onscroll 会在元素的滚动条滚动的时候触发    tiao.onscroll = function () {}

<!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>
        #tiao {
            width: 500px;
            height: 200px;
            background-color: chartreuse;
            overflow: auto;
        }
    </style>
    <script>
        window.onload = function () {

            // //点击测试按钮输出 滚动条可滚高度 、 滚动条
            // document.getElementById('cs').onclick = function () {
            //     let gHeight = document.getElementById('tiao').scrollHeight;  //获取对象可滚动的高度
            //     let wenbenH = document.getElementById('tiao').clientHeight;  //可见区域高 200px
            //     let gTop = document.getElementById('tiao').scrollTop;  //获取或设置对象已纵向滚动的距离            
            //     console.log(gHeight)
            //     console.log(wenbenH)
            //     console.log(gTop)
            // }
            // 获取两个按钮的id
            let t1 = document.getElementById('t1')
            let t2 = document.getElementById('t2')
            //获取div
            let tiao = document.getElementById('tiao')
            //onscroll 会在元素的滚动条滚动的时候触发
            tiao.onscroll = function () {
                let gHeight = tiao.scrollHeight;  //获取对象可滚动的高度
                let wenbenH = tiao.clientHeight;  //可见区域高 200px
                let gTop = tiao.scrollTop;  //获取或设置对象已纵向滚动的距离   
                if (Math.floor(gHeight - gTop) === wenbenH) {
                    // console.log('我滚完了~')
                    t1.disabled = false;
                    t2.disabled = false;
                }
            }


        }
    </script>
</head>

<body>
    <button id="cs">测试按钮</button>
    <h1>欢迎注册，请仔细阅读以下协议：</h1>
    <div id="tiao">
        亲爱的用户，请一定要看完并且遵守我们的协议，要不然就别注册
        亲爱的用户，请一定要看完并且遵守我们的协议，要不然就别注册
        亲爱的用户，请一定要看完并且遵守我们的协议，要不然就别注册
        亲爱的用户，请一定要看完并且遵守我们的协议，要不然就别注册
        亲爱的用户，请一定要看完并且遵守我们的协议，要不然就别注册
        亲爱的用户，请一定要看完并且遵守我们的协议，要不然就别注册
        亲爱的用户，请一定要看完并且遵守我们的协议，要不然就别注册
        亲爱的用户，请一定要看完并且遵守我们的协议，要不然就别注册
        亲爱的用户，请一定要看完并且遵守我们的协议，要不然就别注册
        亲爱的用户，请一定要看完并且遵守我们的协议，要不然就别注册
        亲爱的用户，请一定要看完并且遵守我们的协议，要不然就别注册
        亲爱的用户，请一定要看完并且遵守我们的协议，要不然就别注册
        亲爱的用户，请一定要看完并且遵守我们的协议，要不然就别注册
        亲爱的用户，请一定要看完并且遵守我们的协议，要不然就别注册
        亲爱的用户，请一定要看完并且遵守我们的协议，要不然就别注册
        亲爱的用户，请一定要看完并且遵守我们的协议，要不然就别注册
        亲爱的用户，请一定要看完并且遵守我们的协议，要不然就别注册
        亲爱的用户，请一定要看完并且遵守我们的协议，要不然就别注册
        亲爱的用户，请一定要看完并且遵守我们的协议，要不然就别注册
        亲爱的用户，请一定要看完并且遵守我们的协议，要不然就别注册
        亲爱的用户，请一定要看完并且遵守我们的协议，要不然就别注册
        亲爱的用户，请一定要看完并且遵守我们的协议，要不然就别注册
        亲爱的用户，请一定要看完并且遵守我们的协议，要不然就别注册
        亲爱的用户，请一定要看完并且遵守我们的协议，要不然就别注册
        亲爱的用户，请一定要看完并且遵守我们的协议，要不然就别注册
        亲爱的用户，请一定要看完并且遵守我们的协议，要不然就别注册
        亲爱的用户，请一定要看完并且遵守我们的协议，要不然就别注册
        亲爱的用户，请一定要看完并且遵守我们的协议，要不然就别注册
        亲爱的用户，请一定要看完并且遵守我们的协议，要不然就别注册
        亲爱的用户，请一定要看完并且遵守我们的协议，要不然就别注册
        亲爱的用户，请一定要看完并且遵守我们的协议，要不然就别注册
        亲爱的用户，请一定要看完并且遵守我们的协议，要不然就别注册
        亲爱的用户，请一定要看完并且遵守我们的协议，要不然就别注册
        亲爱的用户，请一定要看完并且遵守我们的协议，要不然就别注册
        亲爱的用户，请一定要看完并且遵守我们的协议，要不然就别注册
        亲爱的用户，请一定要看完并且遵守我们的协议，要不然就别注册
        亲爱的用户，请一定要看完并且遵守我们的协议，要不然就别注册
        亲爱的用户，请一定要看完并且遵守我们的协议，要不然就别注册
        亲爱的用户，请一定要看完并且遵守我们的协议，要不然就别注册
        亲爱的用户，请一定要看完并且遵守我们的协议，要不然就别注册
        亲爱的用户，请一定要看完并且遵守我们的协议，要不然就别注册
        亲爱的用户，请一定要看完并且遵守我们的协议，要不然就别注册
        亲爱的用户，请一定要看完并且遵守我们的协议，要不然就别注册
        亲爱的用户，请一定要看完并且遵守我们的协议，要不然就别注册
        亲爱的用户，请一定要看完并且遵守我们的协议，要不然就别注册
        亲爱的用户，请一定要看完并且遵守我们的协议，要不然就别注册
        亲爱的用户，请一定要看完并且遵守我们的协议，要不然就别注册
    </div>
    <input type="checkbox" name="" id="t1" disabled>我已仔细阅读，并严重同意以上协议
    <button disabled id="t2">注册</button>
</body>

</html>

美美| ू•ૅω•́)ᵎᵎᵎ
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
javascript 设置页面元素的style和class
illhf2008的专栏
06-02 472
avascript 设置页面元素的style和class
JavaScript style 样式
ln201009的博客
02-21 7192
1、首先，我们先进入vs。打开文件夹（文件夹需要提前在桌面上新建好），然后新建一个html文档，改一下title为JavaScript style 样式。 2、我们就先设置一个div，然后style样式设置div的样式属性。图二就是我们设置好的这个div的样式 3、接下来我们运用script这个标签来设置js的内容，也就是要运用js改变我们用style设置的样式。 4、我们要设置哪个内容就要先获取到哪个元素，正如这个我们要获取到那个div，我们就要通过获取div的id名
js修改元素样式
libingjiedd的博客
03-17 1176
–3.获取日期格式的字符串 toString()、toLocaleTimeString()、toLocaleDateString()等。|–x.indexOf(findstr,index)、x.lastIndexOf(findstr,index)： 获取指定字符；如返回-1，x则不在数组中。|–parentNode.insertBefore()(新元素对象，A)–其中A为新元素要插入位置的后一位元素。|–x.toFixed(num):可把Number四舍五入为指定小数位数(num:0-20)的数字。
如何使用JS修改页面元素（附练习案例）
ZZZzzz98的博客
10-20 1522
使用不同方法实现对页面元素、属性以及CSS进行修改（三个案例帮你快速掌握）
元素的样式设置
qq_52654932的博客
03-23 240
pageX和pageY：包括滚动条滚动的距离。触发点距离浏览器左侧和上侧的距离。
onscroll-animation:元素在视图中时的Javascript滚动动画
05-14
滚动浏览器时，当元素在视图中时，动画的简单javascript库。 :rocket: :gear: 安装 选项A。 NPM安装 npm install onscroll-animation --save 进口： import OnScrollAnimation from "onscroll-animation" ; ...
关于onScroll事件在IE6下每次滚动触发三次bug说明
09-05
今天测试发现IE6下用[removed]，每次滚动时会触发3次，而火狐、IE7没此问题，应该是IE6的一个BUG
js网页滚动条滚动事件实例分析
01-19
在做js返回顶部的效果时，要监听网页滚动条滚动事件，这个事件就是：[removed]。当onscroll事件发生时，用js获得页面的scrollTop值，判断scrollTop为一个设定值时，显示“返回面部” js网页滚动条滚动事件 <...
vue-animate-onscroll：一个简单的组件，可在元素滚动到视图中时对其进行动画处理
02-03
Vue动画控制一个简单的Vue指令，可在元素滚动到视图中时对其进行动画处理。安装npm install vue-animate-onscroll# oryarn add vue-animate-onscroll建立导入到您的Vue应用程序import Vue from 'vue'import ...
onscroll-effect:一个很小JavaScript库，可在用户滚动时启用CSS动画
05-13
一个很小JavaScript库，可在用户滚动时启用CSS动画。 当用户滚动页面时，该库允许您在元素出现在视口中时切换元素上的一个或多个类。 它使您能够构建仅当用户将页面滚动到元素时才启动的CSS过渡或动画。 您所要做的...
uniapp点击事件修改元素样式
热门推荐
weixin_44691220的博客
11-19 1万+
1.要有一个dom元素，用ref绑定 2.获取到dom元素并操作样式
js中元素样式设置的六种方法
weixin_52452081的博客
03-23 6340
pink;</</</</
DOM—事件基础 操作元素（改变元素内容、修改元素属性、表单属性设置、样式属性操作）
m0_59030524的博客
01-02 717
1.事件基础 1.1 事件三要素 事件源、事件类型、事件处理程序 <body> <button id='btn'>唐伯虎</button> <script> // 点击一个按钮，弹出对话框 // 1. 事件三要素：事件源、事件类型、事件处理程序 // （1）事件源：事件被触发的对象——按钮 var btn = document.getElementById('btn');.
JS修改元素的样式
编程的旭哥哥的博客
11-02 7748
先看代码 &lt;html&gt; &lt;head&gt; &lt;style&gt; #a{ width:700px; height:300px; font-size:50px; color:red; background-color:grey; z-index:2; position:absolute; t...
20210525JS修改样式
qq_35482765的博客
06-01 478
1.JS通过style修改内联样式 <!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">
CSS实现一个雨滴滑落效果
云加速
05-28 1335
这只是一个非常基础的示例，真实的雨滴滑落效果可能需要更复杂的动画和可能的JavaScript交互来实现更逼真的效果，比如雨滴的大小、速度、下落路径的随机性等。如果你想要一个更复杂的动画效果，你可能需要考虑使用SVG、Canvas或者WebGL等技术，并结合JavaScript来实现。使用纯CSS来实现一个真实的雨滴滑落效果可能会有些挑战，因为CSS主要关注于静态样式和简单的动画效果。然而，你可以使用CSS动画和@keyframes来模拟一个雨滴滑落的简化效果。这个示例中的雨滴是一个简单的圆形元素。
随便用css换个渐变的太阳
最新发布
weixin_43811753的博客
06-01 197
【代码】随便用css换个渐变的太阳。
了解CSS中的link和@import引入CSS的区别
祈澈菇凉
05-28 174
【代码】了解CSS中的link和@import引入CSS的区别。
CSS学习笔记：Less
lbcbjtlhmjq的博客
05-28 388
Less是一个CSS预处理器， Less文件后缀是.less扩充了CSS 语言，使CSS具备一定的逻辑性、计算能力可以通俗地理解：Less是一种更好用的CSS。
滚动h5页面，底部元素显示与隐藏
05-27
1. 监听滚动事件，可以使用`window.onscroll`来监听整个页面的滚动，或者监听某个具体元素的滚动事件。 2. 获取页面滚动的距离，可以使用`document.documentElement.scrollTop`或`document.body.scrollTop`来获取...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值