DOM-BOM-EVENT（5）

最新推荐文章于 2022-03-01 20:34:35 发布
最新推荐文章于 2022-03-01 20:34:35 发布
阅读量104 收藏
点赞数
分类专栏： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/keledon/article/details/103565326
版权

5.宽、高、位置相关

5.1.clientX/clientY

clientX和clientY表示鼠标在浏览器可视区的坐标位置

<script>
    document.onclick = function(ev){
        var ev = ev || event
        alert("clientX:"+ev.clientX+", clientY:"+ev.clientY)
    }
</script>

5.2.pageX/pageY

pageX和pageY表示鼠标在网页文档中的坐标位置，这里需要注意：网页的宽高是可以大于浏览器可视区的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        #box{
            width: 300px;
            height: 2000px;
            background-color: #009f95;
        }
    </style>
</head>
<body>
    <div id="box"></div>

    <script>
        document.onclick = function(ev){
            var ev = ev || event
            alert("clientX:"+ev.pageX+", clientY:"+ev.pageY)
        }
    </script>
</body>
</html>

5.3.offsetLeft/offsetTop/offsetWidth/offsetHeight/offsetParent

offsetLeft和offsetTop是相对于定位父级的坐标位置

offsetWidth和offsetHeight是元素实体所占的总宽高，例如：总宽度 = 内容 + padding + border

offsetParent表示定位父级

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        #box{
            width: 400px;
            height: 400px;
            background-color: #009f95;
            position: absolute;
            left: 200px;
            top:100px;
        }
        #box-inner{
            width: 100px;
            height: 100px;
            background-color: orangered;
            position: absolute;
            left: 50px;
            top: 50px;
            padding: 50px;
        }
    </style>
</head>
<body style="position:relative">
    <div id="box">
        <div id="box-inner"></div>
    </div>
    <script>
        var oBoxIner = document.getElementById("box-inner")
        var oBox = document.getElementById("box")
        document.onclick = function(ev){
            var ev = ev || event
            // 获取left 和 top偏移量
            alert("offsetLeft:"+oBoxIner.offsetLeft+", offsetTop:"+oBoxIner.offsetTop)
            // 获取当前元素的宽高, width = 内容宽高+padding+border
            alert("offsetWidth:"+oBoxIner.offsetWidth+", offsetHeight:"+oBoxIner.offsetHeight)
            // 获取元素的最近的定位父级
            console.log("offsetParent:"+oBoxIner.offsetParent)
        }
    </script>
</body>
</html>

5.4.scrollLeft/scrollTop／scrollWidth/scrollHeight

scrollLeft 和 scrollTop 表示元素滚出去的距离

scrollWidth和scrollHeight 对象的实际内容的宽高，会随对象中内容超过可视区后而变大

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        #box{
            width: 300px;
            height: 200px;
            border: 5px solid black; 
            margin: 100px auto;
            overflow: auto;
            /* box-sizing: border-box; */
        }
        #box-inner{
            width: 450px;
            margin: 100px auto;
            height: 300px;
            border: 1px solid red; 
            background-color: #009f95
        }
    </style>
</head>
<body>
    <div id="box">
        <div id="box-inner"></div>
    </div>
    <script>
        var oBox = document.getElementById("box")
        var oBoxInner = document.getElementById("box-inner")

        oBox.onclick = function(){
            // 顶部滚动距离
            alert("scrollTop:"+this.scrollTop+"scrollLeft:"+this.scrollLeft)

            alert("scrollWidth:"+this.scrollWidth+",scrollHeight:"+this.scrollHeight)
        }
    </script>
</body>
</html>

5.5.clientWidth/clientHeight

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        #box{
            width: 400px;
            height: 400px;
            background-color: #009f95;
            position: absolute;
            left: 200px;
            top:100px;
        }
        #box-inner{
            width: 100px;
            height: 100px;
            background-color: orangered;
            position: absolute;
            left: 50px;
            top: 50px;
            padding: 50px;
            border: 20px solid black;
        }
    </style>
</head>
<body style="position:relative">
    <div id="box">
        <div id="box-inner"></div>
    </div>
    <script>
        var oBoxIner = document.getElementById("box-inner")
        var oBox = document.getElementById("box")
        document.onclick = function(ev){
           var ev = ev || event
           //元素可视区宽高， 内容+padding 不包括边框
           alert("clientWidth:"+oBoxIner.clientWidth+", clientHeight:"+oBoxIner.clientHeight)      
        }
    </script>
</body>
</html>

5.6.总结

offsetWidth／offsetHeight clientWidth/clientHeight scrollWidth/scrollHeight

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        #box{
            width: 300px;
            height: 200px;
            border: 5px solid black; 
            margin: 100px auto;
            overflow: auto;
            padding: 20px;
          
        }
        #box-inner{
            width: 450px;
            margin: 100px 300px;
            height: 300px;
            border: 1px solid red; 
            background-color: #009f95
        }
    </style>
</head>
<body>
    <div id="box">
        <div id="box-inner"></div>
    </div>
    <script>
        var oBox = document.getElementById("box")
        var oBoxInner = document.getElementById("box-inner")

        oBox.onclick = function(){
            // 顶部滚动距离
            console.log("有滚动条的时候-----》")
            console.log("scrollWidth:"+this.scrollWidth)

            //offsetWidth
            console.log("offsetWidth-----》")
            console.log("offsetWith:"+this.offsetWidth)

            // clientWidth
            console.log("clientWidth-----》")
            console.log("clientWidth:"+this.clientWidth)
        }
    </script>
</body>
</html>

总结： 1. clientWidth和offsetWidth返回的值和内部元素无关，它们两个的区别是，前者返回的值是：width+padding ，后者返回的值是：width+padding+border 2. scrollWidth返回的值和内部的元素有关，它返回的是内部元素实际的宽带，包括margin、padding、border等 等，会随着内部元素所占宽度的增加而增加

5.7.如何获取文档的宽／高？

document.documentElement.scrollWidth/scrollHeight

5.8.如何获取可视区宽／高？

docuement.documentElement.clientWidth document.documentElement.clientHeight

5.9.如何获取页面的滚动距离？

document.documentElement.scrollTop/scrollLeft

大地飞鸿
关注
专栏目录
javaAPI---BOM
qq_45598568的博客
07-24 366
BOM BOM（Browser Object Model）即浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是 window。 BOM 由一系列相关的对象构成，并且每个对象都提供了很多方法与属性。 BOM 缺乏标准，JavaScript 语法的标准化组织是 ECMA，DOM 的标准化组织是 W3C，BOM 最初是Netscape 浏览器标准的一部分。 DOM 文档对象模型 DOM 就是把「文档」当做一个「对象」来看待 DOM 的顶级对象是 document DOM 主..
DOM-BOM-EVENT（1）
螺钉课堂官方博客
12-16 131
1.DOM简介 DOM(Document Object Model)即文档对象模型，是HTML和XML文档的编程接口。它提供了对文档的结构化的表述，并定义了一种方式可以使得从程序中对该结构进行访问，从而改变文档的结构，样式和内容。DOM 将文档解析为一个由节点和对象（包含属性和方法的对象）组成的结构集合。简言之，它会将web页面和脚本或程序语言连接起来。 <html> <head...
bom event周期_DOM-BOM-EVENT（1）
weixin_39980893的博客
12-21 61
1.DOM简介DOM(Document Object Model)即文档对象模型，是HTML和XML文档的编程接口。它提供了对文档的结构化的表述，并定义了一种方式可以使得从程序中对该结构进行访问，从而改变文档的结构，样式和内容。DOM 将文档解析为一个由节点和对象(包含属性和方法的对象)组成的结构集合。简言之，它会将web页面和脚本或程序语言连接起来。My DocumentHeaderParagr...
DOM-BOM-EVENT（3）
螺钉课堂官方博客
12-16 106
3.Node常用属性 childNodes 获取所有子节点 <div id="wrap"> <div>1111</div> <div>2222</div> <div>3333</div> <div>4444</div> <div>5555&...
DOM-BOM-EVENT（4）
螺钉课堂官方博客
12-16 82
4.dom操作 createElement 创建一个元素 <button id="btn">点击</button> <ul id="ul1"></ul> <script> var oBtn = document.getElementById("btn") var oUl = document.getElementById(...
DOM-BOM-EVENT（2）
螺钉课堂官方博客
12-16 103
2.获取DOM元素的方法 2.1.getElement系列 documentElementById 通过id获取元素 <div id="box"></div> <script> var oDiv = document.getElementById("box) </script> documentElementsByClassName 通过类...
BOM-DOM-事件
欧气满满大顺顺的博客
04-04 1365
DOM简单学习 功能：控制html文档的内容 获取页面标签(元素)对象：Element document.getElementById(“id值”):通过元素的id获取元素对象 操作Element对象： 修改属性值： 明确获取的对象是哪一个？ 查看API文档，找其中有哪些属性可以设置 修改标签体内容： 属性：innerHTML 获取元素对象 使用innerHTML属性...
DOM - BOM - 拖拽 - 拖拽文件到页面
weixin_52088589的博客
04-29 194
文章目录1 , 拖拽2 , 鼠标移动显示坐标3 , 把外部图片拖拽到元素显示4 , 元素自动跟随鼠标移动 1 , 拖拽 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Docume
WebApis- BOM&DOM
sycVegetableDog的博客
03-01 293
是W3C的标准，主要学习页面交互功能实现交互效果； API是一些预先定义的函数，简单理解就是给程序员提供的一种工具，以便能轻松的实现想要完成的功能； Web APIs是浏览器的API； DOM 文档对象模型，是处理html或者xml的编程接口；可以通过里面的接口修改网页内容，样式，结构； 文档：一个文档就是一个页面，DOM中使用document表示； 元素：页面中所有的标签就是元素； 节点：网页中所有的内容都是节点，比如标签，内容，文本，注释等。 获取元素 根据id获取： 使用getElementB
JavaScript笔记之二：DOM-BOM
Limonor的博客
11-05 281
WebAPI web APIs是W3C的标准 主要学习DOM BOM 页面交互 API（应用程序编程接口）是一些预先定义的函数，方便用，不需要理解 web API是浏览器提供的一套操作浏览器功能和页面元素的API（BOM DOM） DOM DOM（文档对象模型），是W3C组织推荐的处理可扩展标记语言（HTML/XML）的标准编程接口。 已经定义了有一系列的DOM接口，通过这些DOM接口可以改变网页的内容、结构和样式。 DOM树 一个页面就是一个文档 document 页面中的所有标签都是元素 elem
js dom-2bom初识
qq_43382750的博客
08-13 207
节点操作 、什么是节点 根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点： 整个文档是一个文档节点 document 每个 HTML 元素是元素节点 HTML 元素内的文本是文本节点 每个 HTML 属性是属性节点 注释是注释节点 、节点类型 通过noteType属性可以获取节点的类型 document的节点类型---9 console.log(document.nodeType);//9 标签的节点类型---1 varbox1=docume...
slide-bom:浏览器对象模型 (BOM) 的网页幻灯片
07-10
**标题与描述解析** ...综上所述，"Slide-BOM"的课程可能会涵盖JavaScript中的BOM核心概念、与滑动效果相关的DOM操作、事件处理以及动画技术。通过学习，开发者能够掌握创建动态、交互性强的网页应用所需的技能。
第10章 JS-Web-API-BOM【内容虽然不多，但是你不能不会】.rar
12-24
BOM与DOM相辅相成，DOM主要关注页面内容，而BOM则关注页面与浏览器的交互。 五、现代浏览器扩展 随着Web技术的发展，现代浏览器提供了更多的API，如WebSocket用于实现双向通信，Geolocation API获取设备地理位置，...
canvas基础入门系列教程(5)-绘制曲线图形
螺钉课堂官方博客
02-12 2350
3.绘制曲线图形 在canvas中曲线图形通常分为两种，曲线和弧线，弧线就是圆周上的一部分，曲线上每一点都有相同的曲率，曲线则不一定，曲线的范围更大，曲线包含率弧线 3.1.使用点来画曲线 &amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html lang=&quot;en&quot;&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;
canvas基础入门系列教程(1)-canvas初体验
螺钉课堂官方博客
02-12 1117
1.canvas初体验 1.1.canvas 是什么 canvas是html5新增的一个元素，配合宽度和高度属性定义出一个可绘图的区域，JavaScript可以访问该区域，通过一套完整的绘图函数来动态生成图形。canvas的应用包括绘制图形、绘制图表、制作动画效果、进行游戏开发等 总结：本质上canvas是一个html5元素，需要通过JavaScript来操作才能实现各种功能，只是一个canvas...
使用Easy Mock构建模拟数据
螺钉课堂官方博客
02-13 1037
Easy Mock简介 Easy Mock 是一个极其简单、高效、可视化、并且能快速生成模拟数据的在线 mock 服务。 我们可以使用它来模拟数据 使用Easy Mock创建一个项目 使用Easy Mock网址：https://easy-mock.com/,你需要去注册一个账号，并且登录，才能进行下面的操作 1.创建项目 把里面的各种选项填写好点创建按钮就可以了 2.添加接口 进入到刚才创建的项...
es6+最佳入门实践(8)
螺钉课堂官方博客
02-09 702
8.Promise 8.1.什么是异步？ 要理解异步，首先，从同步代码开始说 alert(1) alert(2) 像上面的代码，执行顺序是从上到下，先后弹出1和2，这种代码叫做同步代码 alert(0) setTimeout(function () { alert(1); }, 2000); setTimeout(function () { alert(2) }, 1000); ...
es6+最佳入门实践(7)
螺钉课堂官方博客
02-09 646
7.set和map数据结构 7.1.什么是set? Set就是集合，集合是由一组无序且唯一的项组成，在es6中新增了set这种数据结构，有点类似于数组，但是它的元素是唯一的，没有重复 let st = new Set([1,2,2,3,3,4]) console.log(st) // [1,2,3,4] Set的size属性可以知道set中有多少元素，类似于数组的length属性 let s...
react最佳入门实践（1）
螺钉课堂官方博客
06-08 568
1.环境搭建 React 是 Facebook 推出的一个用来构建用户界面的 JavaScript 库 1.1.安装node(mac版)    安装homebrew /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

大地飞鸿

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值