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://xiahunao.cn/news/2774721.html

如若内容造成侵权/违法违规/事实不符,请联系瞎胡闹网进行投诉反馈,一经查实,立即删除!

相关文章

nodeJS 的 npm 设置国内高速镜像之淘宝镜像的方法

1、我们知道 nodeJS 是老外搞出来的&#xff0c;服务器放在了国外&#xff0c;国内的小朋友访问起来会比较慢&#xff0c;阿里巴巴的淘宝给出了有力支持&#xff0c;现在我们就将 nodeJS 的镜像地址切换为国内的淘宝镜像。 2、查看当前的镜像地址&#xff1a; npm get registr…

高级FPGA开发之基础协议PCIe(二)

高级FPGA开发之基础协议之PCIe&#xff08;二&#xff09; 一、TLP报文类型 在PCIe总线中&#xff0c;存储器读写、I/O读写和配置读写请求TLP主要由以下几类报文组成&#xff1a; 1.1 存储器读请求TLP和读完成TLP 当PCIe主设备&#xff08;RC或者EP&#xff09;访问目标设备…

立面效果图为何要用云渲染100?渲染100邀请码1a12

建筑设计是一门艺术&#xff0c;而立面效果图是艺术的展现&#xff0c;它在设计中非常重要。 1、立面效果图的重要性 立面效果图能用来展示建筑物的风格、材质、色彩以及环境等因素&#xff0c;通过它&#xff0c;设计师可以检验项目质量&#xff0c;评估效果是否达到预期&…

C#上位机与三菱PLC的通信04--MC协议之A-1E报文测试

到目前为止&#xff0c;还没有网上有哪个文章有我如此的报文分析&#xff0c;操作实例&#xff0c;一大批都是抄来抄去&#xff0c;没有截图&#xff0c;没有说明&#xff0c;没有实例&#xff0c;有卵用呀&#xff0c;仅以此文章献给最爱的粉丝&#xff0c;希望对各位大师有些…

MySQL-索引(INDEX)

文章目录 1. 索引概述及优劣势2. 索引结构和不同引擎对索引的支持情况2.1 Btree2.2 Hash索引 3. 索引分类4. 索引语法5. 索引在什么情况下会失效&#xff1f;5.1 最左前缀法则5.2 范围查询5.3 索引列运算5.4 头部模糊查询5.5 OR连接条件5.6 字符串不加引号5.7 数据分布影响 6. …

【Qt学习笔记】Qt Creator环境下 信号与槽 详解(自定义信号槽、断连、lambda表达式等)

文章目录 1. 信号槽概念1.1 信号的本质1.2 槽的本质1.3 标准信号槽1.4 信号槽 实例 2. 自定义信号槽2.1 自定义槽函数2.2 自定义信号2.3 带参 信号槽 3. 信号槽的意义 与 作用4. 信号槽断连 &#xff08;了解&#xff09;5. lamda表达式的使用5.1 基本用法5.2 捕获局部变量5.3 …

七、Nacos源码系列:Nacos服务发现

目录 一、服务发现 二、getServices()&#xff1a;获取服务列表 2.1、获取服务列表 2.2、总结图 三、getInstances(serviceId)&#xff1a;获取服务实例列表 3.1、从缓存中获取服务信息 3.2、缓存为空&#xff0c;执行订阅服务 3.2.1、调度更新&#xff0c;往线程池中…

【VTKExamples::PolyData】第二十三期 InterpolateMeshOnGrid

很高兴在雪易的CSDN遇见你 VTK技术爱好者 QQ:870202403 前言 本文分享VTK样例InterpolateMeshOnGrid,并解析接口vtkProbeFilter 、vtkWarpScalar & vtkDealuany2D等多个接口,希望对各位小伙伴有所帮助! 感谢各位小伙伴的点赞+关注,小易会继续努力分享,一起进步!…

用友U8+OA doUpload.jsp 文件上传漏洞复现

0x01 产品简介 用友U8+ OA经过20多年的市场锤炼,不断贴近客户需求,以全新UAP为平台,应对中型及成长型企业客户群的发展,提供的是一整套企业级数智化升级解决方案,为成长型企业构建精细管理、产业链协同、社交化运营为一体的企业互联网经营管理平台,助力企业应势而变,赢…

navigator.mediaDevices.getUserMedia获取本地音频/麦克权限并提示用户

navigator.mediaDevices.getUserMedia获取本地音频/麦克权限并提示用户 效果获取权限NotFoundErrorNotAllowedError 代码 效果 获取权限 NotFoundError NotAllowedError 代码 // 调用 captureLocalMedia()// 方法 function captureLocalMedia() {console.warn(Requesting lo…

软件应用实例分享,电玩计时计费怎么算,佳易王PS5游戏计时器系统程序教程

软件应用实例分享&#xff0c;电玩计时计费怎么算&#xff0c;佳易王PS5游戏计时器系统程序教程 一、前言 以下软件教程以 佳易王电玩计时计费管理系统软件V17.9为例说明 软件文件下载可以点击最下方官网卡片——软件下载——试用版软件下载 点击开始计时后&#xff0c;图片…

数字图像处理(实践篇)四十三 OpenCV-Python 使用SURF算法检测图像上的特征点的实践

目录 一 SURF算法概述 1 积分图 2 SURF算法 3 SIFT与SURF 二 涉及的函数 三 实践 一 SURF算法概述

jmeter的简单使用

1、打开jmeter 打开Jmeter 安装包&#xff0c;进入\bin 中&#xff0c;找到“ApacheJMeter.jar”或"jmeter.bat", 双击打开即可 2、建立线程组 如下图所示&#xff0c;右击TestPlan&#xff0c;点击ADD->Threads(Users)->ThreadGroup 线程组页面分析&#xf…

中科星图——如何利用中科星图智脑引擎来下载0.5米分辨率的高清遥感影像

简介 如何利用中科星图智脑引擎来下载0.5米分辨率的高清遥感影像,这里我们一旦您有GEE的基础那么还是非常好的接入到这个平台当中的,所以这里我们依旧是使用的JavaScript语言来进行编程,地球计算器-地球编程 (geovisearth.com) 这里有一个好处是这里的函数我们可以直接悬浮…

LoveWall v2.0Pro社区型校园表白墙源码

校园表白墙&#xff0c;一个接近于社区类型的表白墙&#xff0c;LoveWall。 源码特色&#xff1b; 点赞&#xff0c; 发评论&#xff0c; 发弹幕&#xff0c; 多校区&#xff0c; 分享页&#xff0c; 涉及违禁物等名词进行检测&#xff01; 安装教程: 环境要求&#xff1b;…

应用案例 | Softing dataFEED OPC Suite助力挤出机械自动化系统OPC UA升级

某知名挤出机械整体方案供应商在其最新自动化系统中采用了Softing dataFEED OPC Suite作为标准的OPC UA通信方案&#xff0c;不仅可采集多个西门子S7-1200控制器数据&#xff0c;而且为终客户提供了可靠、高性能的挤出机械自动化解决方案。 一 背景 多年前&#xff0c;该挤出机…

Codeforces Round 923 (Div. 3)D. Find the Different Ones! 双指针

Problem - D - Codeforces 双指针O(2n)&#xff0c;其实本场B题我写的是O(26n)&#xff0c;结果这道题不敢想哈哈。 题意就是给你一串数字&#xff0c;然后问区间(l , r)内是否有不同的数字&#xff0c;输出任意一组下标即可&#xff0c;没有就输出 -1 -1 所以我们看l 在 l1~…

Python(21)正则表达式中的“元字符”

大家好&#xff01;我是码银&#x1f970; 欢迎关注&#x1f970;&#xff1a; CSDN&#xff1a;码银 公众号&#xff1a;码银学编程 获取资源&#xff1a;公众号回复“python资料” 在本篇文章中介绍的是正则表达式中一部分具有特殊意义的专用字符&#xff0c;也叫做“元…

鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之Stepper组件

鸿蒙&#xff08;HarmonyOS&#xff09;项目方舟框架&#xff08;ArkUI&#xff09;之Stepper组件 一、操作环境 操作系统: Windows 10 专业版、IDE:DevEco Studio 3.1、SDK:HarmonyOS 3.1 二、Stepper组件 鸿蒙&#xff08;HarmonyOS&#xff09;仅能包含子组件StepperIte…

服务器与电脑的区别?

目录 一、什么是服务器 二、什么是电脑 三、服务器和电脑的区别 一、什么是服务器 服务器是指一种专门提供计算和存储资源、运行特定软件服务的物理或虚拟计算机。服务器主要用于接受和处理来自客户端&#xff08;如个人电脑、手机等&#xff09;的请求&#xff0c;并向客户…