每日信息:js获取页面滚动高度_js设置div的宽度和高度
那些不常见,但却非常实用的JS知识点(下) 本篇
二、element(DOM 对象)
1、element 属性和方法
1.1、clientHeight / clientWidth 属性
【资料图】
clientHeight:元素内部的高度,包含内边距,但不包括水平滚动条、边框和外边距。
clientWidth:元素内部的宽度,包含内边距,但不包括垂直滚动条、边框和外边距。
此属性会将获取的值四舍五入取整数。
document.querySelector("span").clientWidth
clientHeight 和 clientWidth 支持性一致
1.2、scrollHeight / scrollWidth 属性
类似于上方的 clientHeight / clientWidth,不同在于 clientHeight / clientWidth 在元素设置 overflow 后,不包含隐藏不可见的高度部分。而 scrollHeight / scrollWidth 却包含隐藏的那部分高度。
我觉得利用这个特性来判断是否超长,如果 scrollWidth 大于 clientWidth,则表示超长,此时可以对于那些超长后显示…的元素在浮上去后展示一个自定义的 toolip.
scrollHeight 和 scrollWidth 支持性一致
1.3、getBoundingClientRect()方法
返回元素的大小及其相对于视口的位置(眼睛看得见的文档区域)。
这个方法超级好用。不管你的元素在什么位置,它都会计算出来当前元素 相当于 视口的边缘的位置,和滚动条无关。
返回值为
{ bottom: xx, //元素底部离视口顶部的距离 height: xx, //元素高度,和元素的clientHeight属性一致,但比它精确,会保留小数 left: xx, //元素左边离视口左侧的距离 right: xx, //元素右边离视口左侧的距离 top: xx, //元素上部离视口顶部的距离 width: xx, //元素宽度,和元素的clientWidth属性一致,但比它精确,会保留小数}
这个方法的支持性为 100%, 良心啊,为什么我才知道这个方法?
1.4、scrollIntoView()方法
如果父元素定义了 overflow,并产生了滚动条,里面有个子元素,在滚动条滑动后,看不到了。那么可以让这个子元素执行这个方法,让元素滚动到父元素可视区域内。
可以定义滚动条可视区域的顶部,底部,还是左边,右边。
也可以定义平滑的滚动过来,还是一瞬间滚动过来。
这个方法的好处是自动计算里面的元素距离可见区域多少,不需要给数值进行人为干涉,而 scroll()或 scrollTo()方法,必须人为计算滚动条的距离,然后给个数值,才能滚动到某个位置。
首先看个例子,
div1 超过屏幕的区域有个 div2,超过 div2 的区域有个 span1,此时我们可以通过调用 span1 元素的 scrollIntoView 方法,让 span1,滚动到 div2 的可见区域,也就是向左边滚动,但是有个坏处,就是 div1 也会向上滚动,直到 div2 能被用户看到。
而 scroll()或 scrollTo()方法在 span1 滚动到 div2 的可见区域时,div1 不动。不会产生其他附加作用,直到你慢慢滑屏,才会看到 span1,已经停留在 div2 的可视范围了。
1.5、scroll() / scrollTo() / scrollBy() 方法
scrollTo 方法可以使界面滚动到给定元素的指定坐标位置。
以产生滚动条的那个父元素为基准,
scroll() scrollBy() scrollTo()合称为 scrollOptions API
2、element 事件
2.1、contextmenu 事件
contextmenu 事件会在用户尝试打开上下文菜单时被触发。该事件通常在鼠标点击右键或者按下键盘上的菜单键时被触
这个段落右键菜单已被禁用。
noContext = document.getElementById("noContextMenu");noContext.addEventListener("contextmenu", e => { e.preventDefault();});
单击右键,不会出现标准的右键菜单项目
2.2、copy 事件/cut 事件/ paste 事件
dom 的复制/剪切, 粘贴事件。
Try copying text from this box... ...and pasting it into this onelet sourceDom = document.querySelector(".source");sourceDom.addEventListener("copy", function (e) { //将数据存入剪切板 e.clipboardData.setData("abc", "Hello, world!"); e.preventDefault();});let targetDom = document.querySelector(".target");targetDom.addEventListener("paste", function (e) { //从剪切板取出来 let data = e.clipboardData.getData("abc"); //自定义转化数据 data = data.toUpperCase(); //获取光标位置 const selection = window.getSelection(); if (!selection.rangeCount) return false; selection.deleteFromDocument(); //将转换后的数据插入到光标位置 selection.getRangeAt(0).insertNode(document.createTextNode(data)); e.preventDefault();});
这三个事件支持性一致
2.3、focusin 事件 / focusout 事件
当元素获得焦点时,focusin 事件被触发。
focusin 事件和 focus 事件之间的主要区别在于 focus 不会冒泡。
当元素即将失去焦点时,focusout 事件被触发。
focusout 事件和 blur 事件之间的主要区别在于 blur 不会冒泡。
2.4、onscroll / onwheel
类似于 window 的 onscroll 和 onwheel。只不过绑定对象为 element
let sourceDom = document.querySelector(".source");sourceDom.addEventListener("scroll", function (e) { console.log("111");});sourceDom.addEventListener("wheel", function (e) { console.log("111");});
三、document(文档对象)
1、document 属性和方法
1.1、characterSet
返回当前文档的字符编码,但有相当一部分浏览器未实现,可使用原始的 charset 代替
document.characterSet || document.charset
1.2、compatMode
表明当前文档的渲染模式是怪异模式/混杂模式还是标准模式。
document.compatMode // BackCompat怪异模式, CSS1Compat标准模式
1.3、defaultView
返回当前 document 对象所关联的 window 对象,如果没有,会返回 null。
document.defaultView //返回还是window,我为什么不直接 使用window呢?
上面的代码很平淡,不足为奇,可是下面的就不一定了
let doc = document.querySelector("object").contentDocument; //得到一个document对象doc.defaultView; //接着得到一个window
得到这个 window 后,有什么用呢?
我们可以想象一个场景,当我们缩放 window 窗口时,会触发 window 的 onresize 事件,但是缩放 div,却不会触发 onresize 事件,因为 dom 没有 onresize,那么如何监听一个 div 的 resize 呢?
就是上述的方式,在 div 中套一个 object。我不监听 div,我监听 div 中的 object,一旦 div 变了,object 不也就变了吗?
然后通过 object 返回的一个 window 对象,就自然可以绑定 onresize 事件了
document.querySelector("object").contentDocument.defaultView .addEventListener("resize", () => { //只要div尺寸变化,object尺寸就变化,resize就能监听到。不管何种原因导致的尺寸变化。都会监听到。});
除此之外,我有一遍专门介绍如何彻底解决 div 尺寸变化问题的文章,有兴趣的伙伴可以阅读
1.4、designMode
控制整个文档是否可编辑。有效值为 “on” 和 “off” 。
默认值为 “off” 。如果设置为”on”,则好比给 html 所有的元素都添加了 contenteditable 属性。
1.5、documentElement
会返回文档对象(document)的根元素。
可以通过document.documentElement.clientHeight 来获取浏览器的可用高度,这个高度和 html 或者 body 的 style 上的 height 无关,只与浏览器的上方地址栏,下方工具栏等有关,和 window.innerHeight 相等。
2、document 事件
2.1、onscroll / onwheel
类似于 window 的 onscroll 和 onwheel。只不过绑定对象为 document
document.addEventListener("scroll", function (e) { console.log("111");});document.addEventListener("wheel", function (e) { console.log("111");});
电脑
-
Photoshop图形处理器如何使用性能首选项?显卡驱动和Photoshop问题故障诊断
兼容的图形处理器(也称为图形卡、显卡或 GPU)可让您获得更好的 Photoshop 性能体验并利用其更多功能...
-
钉钉中屏蔽别人的具体步骤分享 钉钉中如何屏蔽同事不接收同事消息?
在钉钉中屏蔽别人的具体步骤如下:1、打开手机钉钉软件,点击下方的登录按钮,登录个人账号。2、登录之...
-
PS中的标尺工具怎么使用定位?PS软件中如何使用标尺工具定位?
标尺工具 可帮助您准确定位图像或元素。标尺工具可计算工作区内任意两点之间的距离。当您测量两点间的...
-
启动Excel时没有响应停止工作该怎么办?Excel无法正常启动解决方法
本文讨论在您启动 Excel 时,Excel 没有响应错误、启动 excel 工作簿或打开 Excel 工作簿时,可...
-
修复损坏的excel工作簿详细操作方法 如何修复损坏的Excel工作簿?
打开已损坏的工作簿时,Excel 将自动启动文件恢复模式,还会尝试重新打开并同时修复工作簿。Excel 并...
硬件
- 郑州封控区、管控区外社会面已连续3次阳性病例零报告!
- 郑州:非生活必需场所一律暂时关闭 出租车、网约车单双号限行
- 郑州昨天新增确诊病例11例,累计报告确诊病例103例
- 郑州:各核酸检测采样点开辟学生绿色通道
- 为何持续多轮做核酸检测 河南疾控专家解释
- 驻马店:关于依法严厉打击涉疫情网络谣言等违法信息的通告
- 郑州本轮累计报告103例本土确诊病例 均为普通型或轻型
- 郑州第五轮9区全员核酸检测已检724.9万人,已确诊5例
- 安阳疫情最新消息|1月10日安阳市新增本土确诊病例58例,其中56例在汤阴县
- 全国疫情最新消息|1月10日新增确诊192例 天津新增本土确诊10例 河南新增本土确诊87例
- 河南疫情最新消息|1月10日河南新增本土确诊病例87例
- 1月10日0时至11日8时,安阳新增本土确诊58例
- 河南省2022年中招理化生实验操作考试怎么考?总分多少分?
- 河南警方通报11起疫情防控典型案例!多人被依法立案侦查!
- 每日信息:js获取页面滚动高度_js设置div的宽度和高度
- 世界要闻:海口美食街有哪些 海口特色美食街推荐
- 世界热资讯!国产路亚竿哪个牌子好?国产路亚竿品牌排行前十
- 丽水十大景点排行榜 丽水最受欢迎景点排名
- 【环球热闻】法国十大红酒品牌排行 拉菲庄酒世界闻名
- 环球新资讯:photoshop软件是免费的吗_浅谈现在能代替ps的修图软件
- 世界新消息丨大岛由加利电影
- 底盘高的轿车排名前十 观致3GT位居第一(离地间隙可达224mm)
- 手电钻什么牌子的最耐用?耐用的手电钻十大品牌排名
- 【世界快播报】什么是双顶置凸轮轴_凸轮轴的作用是什么
- 宝马x3仅售27万 宝马x3最新售价34万元(优惠降价高达6万元)
- 【环球速看料】2020完美黑苹果笔记本的配置有哪些_小米新款笔记本秒杀苹果
- 珠海十大热门餐厅排名:泽荣村烧鸡上榜,第十日料
- 蛋白粉哪个牌子好? 最好的蛋白粉品牌排行榜前十位
- 世界快资讯:2进制转换10进制方法_11010011转成十进制步骤
- 环球热推荐:一个人单干暴利项目有哪些_年入百万的5个暴利项目
- 世界热点评!如何一年赚100万,这三个方法帮助你年入百万
- 婚纱摄影营销方案_一套完整的婚纱摄影运营推广策略
- 观点:数据传输加密的三种方式_解析数据传输加密方式有哪些
- 世界今亮点!我的世界附魔属性大全_附魔属性装备对应表
- 今日热门!什么什么地式词语-AA地式的词语
- 每日观察!excel自动换行快捷键是哪个_单元格自动换行快捷键
- 世界快资讯丨惠州十大小吃快餐排名
- 天天时讯:伦敦十大著名景点
- 今日聚焦!黄山十大景点排行榜 黄山必看景点都有哪些
- 天天快资讯丨盘锦十大景点排行榜 盘锦一日游景点大全
- rarely是什么意思
- 最新消息:罗马十大必去景点 盘点罗马最著名的景点
- 微粒贷6000提额到20000的方法_效果最好的5种提额技巧
- 时讯:坦克300的真实油耗 坦克300实际油耗10.5L(工信部油耗9.3L)
- 每日视讯:中国十大避寒城市:广州上榜,它是春城
- 环球速读:高考考生号忘了怎么查询 高考考生号是什么
- 每日热闻!千兆宽带下载速度多少正常_认识正常的千兆宽带网速
- 视讯!科目三挂了怎么快速预约
- 每日焦点!人的一生必须要做的十件事 不做的话会有遗憾
- 国内电商公司排名有哪些_中国十大电商平台
- 世界今亮点!姓氏杨笔画-按姓氏笔画排列张、杨
- 焦点观察:星图后台使用教程_个人开通星图的步骤
- 天天通讯!肇庆十大旅游景点排名 肇庆好玩的地方有哪些
- 耶路撒冷十大旅游景点 耶路撒冷旅游景点大全
- 环球焦点!乌鲁木齐10大景点
- 适合女生开的迷你小车 10款车型任你挑(女王版奇瑞eQ1气质拉满)
- 每日聚焦:如何注册北邮邮箱
- 天天视讯!底盘装甲对车的害处,不仅效果不明显而且还会腐蚀底盘
- 当前消息!许昌十大景点排行榜 许昌最值得去的景点推荐
- 哈根达斯经典口味排行 哈根达斯最好吃的口味推荐
- 今日快讯:五菱宏光mini政府有补贴吗
- 世界最资讯丨翻译:让你见笑了
- 焦点!2019军医大学排名及分数线 有哪些军医大学
- 观热点:三线图怎么制作_教你三线图标准格式
- 全球热消息:广州十大温泉排行榜:古兜温泉上榜,它是行业领头羊
- win11黑屏无法进入系统怎么办?电脑黑屏开不了机解决方法
- 电脑开机报错蓝屏0xc000007b怎么办?蓝屏代码0xc000007b解决方法
- 电脑键盘Ctrl+Alt自动按下详细解决方法 Ctrl+Alt自动按下是什么问题?
- 电脑蓝屏提示错误代码0xc0000001的详细解决方法 蓝屏代码0xc0000001怎么修复?
- 电脑屏幕变成红色了该怎么办?电脑显示变红的几种解决方法分享
- 电脑安装memcached出错的详细解决方法 memcached的基本设置方法分享
- 无法正常预览Word2010文档应该怎么办?电脑不能预览Word文件详细解决方法
- 已经安装迅雷但是下载时还是提示需要安装怎么办?迅雷怎么设置关联浏览器?
- QQ来消息播放器声音变小详细解决方法分享 QQ来消息时怎么设置播放器声音不变小?
- QQ无法接收文件解决方法分享 电脑版QQ为什么不能接收文件?
- 鲁大师卸载后LuDaShi文件删除不了详细解决方法 LuDaShi文件无法删除怎么办?
- 安装CAD软件提示缺少dfst.dll要怎么处理?安装CAD提示错误1308解决方法
- itunes bonjour服务已被禁用详细解决方法 电脑怎么启用被禁用的服务?
- Mysql数据库密码忘记了怎么办?怎么重置电脑数据库密码?
- steam库存打不开详细的处理方法 怎么解决steam库存打不开的问题?
- word文档自动生成目录解决方法 怎么设置word文档不自动生成目录?
- ps软件更换图片背景颜色详细操作方法 怎么利用Photoshop更换背景颜色?
- 安装3Dmax时出现卡屏问题解决方法分享 安装3Dmax卡屏怎么办?
- QQ远程协助时对方电脑黑屏是什么问题?远程协助对方电脑黑屏解决方法
- 电脑Steam更新不了的问题怎么解决?Steam更新不了应该怎么办?
- Excel表格怎么设置成自动换行?win7系统Excel自动换行操作方法分享
- 怎么在Excel文件中添加水印?Excel添加水印详细操作方法
- DOTA2游戏无法连接至Steam网络解决方法 无法连接至Steam网络应该怎么办?
- 使用360浏览器一直出现闪退怎么办?360浏览器闪退详细解决方法
- 安装excel2007提示内存不足解决方法?电脑安装excel提示内存不足应该怎么办?
- 电脑搭建ntp服务器详细操作流程 怎么搭建ntp服务器?
- 打开excel超链接提示由于本机限制详细解决方法 excel超链接由于本机限制怎么办?
- 电脑打不开ps软件了该怎么办?Photoshop软件打不开解决方法
- QQ远程时被拒绝怎么处理?解决QQ远程时被自动拒绝的问题
- steam提示错误代码101和103的解决办法 steam提示错误代码101该怎么办?
- 世界快资讯:无锡十大最值得去的景点 灵山胜境上榜,东林书院排第九
- 天天要闻:西瓜不能和什么一起吃
- 老款rav4哪年的好 2010款丰田rav4其实非常值得买
- 平板截屏的快捷键是什么_揭晓这6种快捷键截图技巧
- 每日头条!东莞十大必去的景点:松山湖第二,第五是东莞地标
- 今日热搜:张家界十大景点排名 张家界必玩的景点有哪些
- 焦点播报:全球十大滑雪品牌排行对比_国外滑雪服品牌介绍
- 全球要闻:大连十大旅游景点排名 大连必去景点排名
- 全球热资讯!世界上最安全的安卓手机 1.7美元的以色列手机
- 郴州十大旅游景点排行榜 郴州最好玩的景点排名
- 【新视野】枣庄十大旅游景点排行榜 枣庄最值得去的地方
- 滚动:青岛特产有哪些可以带走_青岛买什么特产回家
- 环球快看点丨青州十大旅游景点大全 青州好玩的景点有哪些
- 前沿热点:台州十大旅游景点排名 台州有什么可以玩的地方
- 当前信息:长治十大旅游景点大全 长治周边一日游哪里好
- 迪拜二王子的中国老婆迪拜-嫁迪拜人好吗?
- 全球关注:东莞美食最多景点:石排食街上榜,第六海鲜特色
- 全球微速讯:网络应用软件有哪些_最值入手的6款实用软件
- 大众途锐v6多少钱一辆 大众途锐v6售价64万元(发动机达到1340转即可爆发450牛米扭矩)
电竞
数码
事件
- 焦点速看:虎豹家族又添新成员!东北虎豹国家公园监测到幼虎10只幼豹7只12-15
- 每日报道:距离通车又近一步!青岛地铁4号线顺利通过初期运营前安全评估12-15
- 今日热议:中国驻英国使馆声明:中国外交领事机构馆舍和人员不可侵犯12-15
- 快讯:关于启用莱西市“追阳”核酸采样点的通知12-15
- 当你收到“混检阳性”的链接短信,请注意!12-15
- 焦点热门:新增情人林、童趣园、醉樱谷……浮山绿道全线贯通,总长度约16.8公里12-15
- 青岛今天晴转多云,市区最高气温6℃,最低气温-4℃12-15
- 资讯推荐:车辆经过“如履平地”!地铁5号线启用“钢板一体路面”解决占路施工痛点12-15
- 环球快讯:12月14日0时至24时山东省新增本土确诊病例17例12-15
- 世界今亮点!观海晨报 | 青岛职工大病保险首次向三类困难人员倾斜;两股冷空气接续“发威”12-15
- 世界球精选!火星探测器首次捕捉到火星尘暴声,与地球上的尘暴惊人相似12-14
- 【全球独家】青岛各级文明校园广泛开展“劳动美”社会实践活动12-14
- 23个!青岛确认首批市级华侨国际文化交流基地,具体名单来了12-14
- 环球今日报丨为物流行业转型注入新动能!第七届日日顺创客训练营落幕12-14
- 焦点速递!未来三天,两股冷空气接续“发威”!青岛全市最高气温将降至冰点以下12-14