JavaScript基础(28)_获取元素的其他样式

其他样式操作的属性

clientWidth(只读):获取元素的"可见宽度",包括内容区和内边距(返回的是一个数字,不带px,可直接进行计算)。
clientHeight(只读):获取元素的"可见高度",包括内容区和内边距(返回的是一个数字,不带px,可直接进行计算)。
offsetWidth(只读):获取元素的"整个宽度",包括内容区、内边距、边框(返回的是一个数字,不带px,可直接进行计算)。
offsetHeight(只读):获取元素的"整个高度",包括内容区、内边距、边框(返回的是一个数字,不带px,可直接进行计算)。
offsetParent(只读):获取到离当前元素最近的"开启了定位的祖先元素"(如果所有的祖先元素没有开启定位,则返回body)。
offsetLeft(只读):当前元素相对于其定位父元素的"水平偏移量"。
offsetTop(只读):当前元素相对于其定位父元素的"垂直偏移量"。scrollWidth(只读):获取元素"整个滚动区域的宽度"。
scrollLeft(只读):获取水平滚动条"滚动的距离"。
当满足:scrollWidth - scrollLeft = clientWidth 时,说明水平滚动条滚动到底。scrollHeight(只读):获取元素"整个滚动区域的高度"。
scrollTop(只读):获取垂直滚动条"滚动的距离"。 
当满足:scrollHeight - scrollTop = clientHeight 时,说明垂直滚动条滚动到底(较常用)。

注意:以上属性都是只读,不能修改。

元素滚动条滚动事件: 

元素.onscroll:该事件会在元素的滚动条滚动时触发。

示例:

<!DOCTYPE html>
<html lang="zh"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>用户注册协议说明</title><style>p {background-color: cadetblue;width: 280px;height: 220px;padding-left: 5px;padding-top: 5px;overflow: auto;}span {display: inline-block;font-family: 'Courier New', Courier, monospace;color: chocolate;}.box1 {position: relative;top: -5px;}#checkbox {position: absolute;width: 20px;height: 20px;top: -3px}#submit {position: absolute;width: 60px;margin-top: 3px}</style><script>window.onload = function () {var p = document.getElementsByTagName("p")[0];var input = document.getElementsByTagName("input");// 元素的滚动条滚动时触发该事件。p.onscroll = function () {// 当垂直滚动条接近滚动到底时,表单项恢复正常使用。if (p.scrollHeight - p.scrollTop < 1.2*(p.clientHeight)) {// true为禁用 false为非禁用。input[0].disabled = false;input[1].disabled = false;}}                        }</script>
</head><body><h3>用户注册说明</h3><p>尊敬的客户,欢迎您注册成为本网站用户。 在注册前请您仔细阅读如下服务条款: 本服务协议双方为本网站与本网站客户,本服务协议具有合同效力。 您确认本服务协议后,本服务协议即在您和本网站之间产生法律效力。请您务必在注册之前认真阅读全部服务协议内容,如有任何疑问,可向本网站咨询。无论您事实上是否在注册之前认真阅读了本服务协议,只要您点击协议正本下方的"注册"按钮并按照本网站注册程序成功注册为用户,您的行为仍然表示您同意并签署了本服务协议。</p><div class="box1"><span>我已经阅读协议并遵守协议内容</span><!-- disabled:设置或返回checkbox是否被禁用,禁用则表单项不可选中,变为不可用状态--><input type="checkbox" id="checkbox" disabled="disabled"><br><input type="submit" id="submit" disabled="disabled"></div>
</body></html>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/459656.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

推荐收藏!数据分析岗最走心的面经!

年底了&#xff0c;技术群组织了一场机器学习算法岗技术&面试讨论会&#xff0c;邀请了一些同学分享他们的面试经历&#xff0c;讨论会会定期召开&#xff0c;如果你想加入我们的讨论群或者希望要更详细的资料&#xff0c;文末加入。 喜欢本文记得收藏、关注、点赞 &#…

Redis篇之分布式锁

一、为什么要使用分布式锁 1.抢劵场景 &#xff08;1&#xff09;代码及流程图 &#xff08;2&#xff09;抢劵执行的正常流程 就是正好线程1执行完整个操作&#xff0c;线程2再执行。 &#xff08;3&#xff09;抢劵执行的非正常流程 因为线程是交替进行的&#xff0c;所以有…

BUUCTF-Real-[Tomcat]CVE-2017-12615

目录 漏洞描述 一、漏洞编号&#xff1a;CVE-2017-12615 二、漏洞复现 get flag 漏洞描述 CVE-2017-12615&#xff1a;远程代码执行漏洞 影响范围&#xff1a;Apache Tomcat 7.0.0 - 7.0.79 (windows环境) 当 Tomcat 运行在 Windows 操作系统时&#xff0c;且启用了 HTTP P…

【python绘图】爱心、樱花树、饼图、折线图、雷达图

一、爱心 import turtledef curvemove():for i in range(200):turtle.speed(0)turtle.right(1) # 光标向右偏1度turtle.forward(1)# 前进1pxturtle.penup() turtle.goto(0, -70) turtle.pendown()turtle.color(red) turtle.begin_fill() turtle.left(140) turtle.forward(111…

【C++】中的 inline 用法

1、引入 inline 关键字的原因 在 c/c 中&#xff0c;为了解决一些频繁调用的小函数大量消耗栈空间&#xff08;栈内存&#xff09;的问题&#xff0c;特别的引入了 inline 修饰符&#xff0c;表示为内联函数。 栈空间就是指放置程序的局部数据&#xff08;也就是函数内数据&a…

Maven之安装自定义jar到本地Maven仓库中

Maven之安装自定义jar到本地Maven仓库中 文章目录 Maven之安装自定义jar到本地Maven仓库中1. 命令行窗口安装方式1. 常用参数说明2. 安装实例 2. IDEA中安装方式3. 使用 1. 命令行窗口安装方式 安装指定文件到本地仓库命令&#xff1a;mvn install:install-file; 在windows的cm…

【复现】万户 ezOFFICE SQL注入漏洞_42

目录 一.概述 二 .漏洞影响 三.漏洞复现 1. 漏洞一&#xff1a; 四.修复建议&#xff1a; 五. 搜索语法&#xff1a; 六.免责声明 一.概述 万户ezOFFICE协同管理平台分为企业版和政务版。 解决方案由五大应用、两个支撑平台组成&#xff0c;分别为知识管理、工作流程、沟…

成员对象与封闭类

1. 成员对象与封闭类 类里有其他对象则该对象叫成员对象&#xff1b;有成员对象的类叫 封闭类&#xff1b;上例中&#xff0c;如果CCar类不定义构造函数&#xff0c;则会使用默认的无参构造函数&#xff0c;那么下面的语句会编译出错: 因为编译器不明白CCar类中的tyre成员对象…

c++多态(2)-- 虚函数

我们在多态(1)中说到&#xff0c;多态就是使用父类指针访问子类函数&#xff0c;可以使得代码更加的简便。并且举了一个喂食动物的例子加以说明&#xff0c;我们使用代码进行展示。 enum class _ANIMALS_TYPE {CAT,DOG,ANIMAL_COUNT };class Animal { public:Animal(_ANIMALS_…

visual studio code could not establish connection to *: XHR failed

vscode远程连接服务器时&#xff0c;输入密码&#xff0c;又重新提示输入密码&#xff0c;就这样循环了好几次&#xff0c;然后会报上述的错误。由于我是window系统&#xff0c;我用cmd&#xff0c;然后ssh */你的IP地址/*发现可以远程到服务器上&#xff0c;但是通过Vscode就不…

泛型相关内容

1. 什么是泛型 泛型就是定义一种模板&#xff0c;既实现了编写一次&#xff0c;万能匹配&#xff0c;又通过编译器保证了类型安全。 2. 使用泛型 1&#xff09;使用泛型时&#xff0c;把泛型参数<T>替换为需要的class类型&#xff0c;不指定时默认为Obje…

PostgreSql与Postgis安装

POstgresql安装 1.登录官网 PostgreSQL: Linux downloads (Red Hat family) 2.选择版本 3.安装 ### 源 yum install -y https://download.postgresql.org/pub/repos/yum/reporpms/EL-7-x86_64/pgdg-redhat-repo-latest.noarch.rpm ### 客户端 yum install postgresql14 ###…