24-各种宽高、距离的获取

最新推荐文章于 2024-08-13 16:15:07 发布
最新推荐文章于 2024-08-13 16:15:07 发布
阅读量119 收藏
点赞数
分类专栏： js 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44808878/article/details/114953012
版权

第二十四章.各种宽高、距离的获取

1.可视区宽高

  • 窗口宽高

    window.innerWidth window.innerHeight

    包含了滚动条的宽度和浏览器本身的边框宽度（低版本IE不支持）。

  • 内容区宽高

    document.documentElement.clientWidth

    document.documentElement.clientHeight

    不包含滚动条等。

2.元素的各种宽高

  • client

    clientWidth clientHeight

    宽(高)+padding。

  • offset

    offsetWidth offssetHeight

    宽(高)+padding+border。

  • scroll

    scrollWidth / scrollHeigh

    内容的实际高度，当内容没超出相当于client，当内容超出之后，会得到包括超出内容的实际高度，即使加了超出隐藏，也还是会得到内容所占的实际高度。

3.元素的各种距离

  • offset

    offsetLeft offsetTop

    获取左边（上边），到定位父级的左边（上边）的距离。

  • getBoundingClientRect

    返回一个对象，包含了元素各边到窗口的距离，返回的结构类似于：{top:100,left:20,bottom:500,right:890}。

4.滚动距离

  • 页面滚动宽高

    doucment.documentElement.scrollTop

    document.documentElement.scrollLeft

    页面的滚动宽（高）。此属性可以赋值，能让页面滚动到指定的位置。

    设置滚动距离也可以使用window.scrollTo()。

  • 元素滚动宽高

    元素节点.scrollTop 元素节点.scrollLeft

  • 可视区的宽高

<body style="height: 2000px">
  <div></div>
  <script>

    //（只读）

    //包含滚动条
    console.log(window.innerWidth, window.innerHeight);//1536 307

    //不包含滚动条
    console.log(
      document.documentElement.clientWidth,
      document.documentElement.clientHeight
    );//1519 307


  </script>
  • 一个元素宽高的获取
<style>
    #wrap{
      /*box-sizing: border-box;*/
      overflow: hidden;
      width: 100px;
      height: 150px;
      background-color: pink;
      padding: 10px 20px;
      border: 3px solid red;
      margin: 20px;
    }
  </style>

  <div>

    <div id="wrap">
          neirongneirongneirongneirongneirongneirongneirongneirongneirongneirongneirongneirongneirongneirongneirongneirongneirong
      内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
    </div>

  </div>
  <script>

    //（只读）

    let oWrap = document.getElementById("wrap");

    /*
    * clientWidth clientHeight(掌握)
    *   ( content + padding )
    * */
    console.log(oWrap.clientWidth, oWrap.clientHeight);//140 170

    /*
    * offsetWidth offsetHeight(掌握)
    *   ( content + padding + border )
    * */
    console.log(oWrap.offsetWidth, oWrap.offsetHeight);//146 176

    /*
    * scrollWidth scrollHeight（了解）
    *   (元素内容没有超出盒子的时候，值和client一样)
    *   (如果内容超出了盒子，获取真实盒子宽高)
    * */
    console.log(oWrap.scrollWidth, oWrap.scrollHeight);//1053 207

    /*
    * .style.width
    *
    * 获取元素最终显示样式
    *   getComputedStyle( ele )
    *
    * */
    // console.log( oWrap.style.width ); //只能获取到行内样式 

    console.log( getComputedStyle(oWrap).width );//100px
    console.log( getComputedStyle(oWrap).backgroundColor );//rgb(255,192,203)

  </script>
  • offsetLeft、offsetTop
<style>
    *{margin:0;padding:0;font-family:"Microsoft Yahei";}
    body{
      background-color: beige;
    }
    #nav{
      position: relative;
      overflow: hidden;
      margin: 50px;
      width: 200px;
      height: 300px;
      background-color: aquamarine;
    }
    #nav .gd{
      width: 50px;
      height: 50px;
      margin-top: 30px;
      margin-left: 20px;
      background-color: palegoldenrod;
    }
  </style>
</head>
<body>
  <div id="nav">
    <div class="gd">

    </div>
  </div>
  <script>
    /*
    * （只读）
    * 元素到 定位父级 的距离
    *
    *
    * */
    let oGd = document.querySelector("#nav .gd");

    console.log(oGd.offsetLeft, oGd.offsetTop);//20 30
  </script>
  • 滚动高
<body style="height: 2000px; width: 3000px">
  <button id="btn">按钮</button>
  <script>

    btn.onclick = function(){
      // document.documentElement.scrollTop = 333;
      //等价于
      window.scrollTo({top:333,left:0});
    };


    document.onclick = function(){

      console.log(document.documentElement.scrollTop
      ,document.documentElement.scrollLeft);

    };
      
  </script>
</body>
  • 案例–回到顶部
<!DOCTYPE html>
<html lang="zh-cn">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    *{margin:0;padding:0;font-family:"Microsoft Yahei";}
    #toTop{
      position: fixed;
      bottom: 20px;
      right: 20px;
      width: 50px;
      height: 50px;
      background-color: #ddd;

      font-size: 12px;
      text-decoration: navajowhite;
      line-height: 50px;
      text-align: center;
      cursor: pointer;
      user-select: none;
    }
  </style>
</head>
<body>
  <div>
    <!--<a href="#top" id="toTop">回到顶部</a>-->
    <a id="toTop">回到顶部</a>
    <div>
      <p id="top">00001</p>
      <p>00002</p>
      <p>00003</p>
      <p>00004</p>
      <p>00005</p>
      <p>00006</p>
      <p>00007</p>
      <p>00008</p>
      <p>00009</p>
      <p>00010</p>
      <p>00011</p>
      <p>00012</p>
      <p>00013</p>
      <p>00014</p>
      <p>00015</p>
      <p>00016</p>
      <p>00017</p>
      <p>00018</p>
      <p>00019</p>
      <p>00020</p>
      <p>00021</p>
      <p>00022</p>
      <p>00023</p>
      <p>00024</p>
      <p>00025</p>
      <p>00026</p>
      <p>00027</p>
      <p>00028</p>
      <p>00029</p>
      <p>00030</p>
      <p>00031</p>
      <p>00032</p>
      <p>00033</p>
      <p>00034</p>
      <p>00035</p>
      <p>00036</p>
      <p>00037</p>
      <p>00038</p>
      <p>00039</p>
      <p>00040</p>
      <p>00041</p>
      <p>00042</p>
      <p>00043</p>
      <p>00044</p>
      <p>00045</p>
      <p>00046</p>
      <p>00047</p>
      <p>00048</p>
      <p>00049</p>
      <p>00050</p>
      <p>00051</p>
      <p>00052</p>
      <p>00053</p>
      <p>00054</p>
      <p>00055</p>
      <p>00056</p>
      <p>00057</p>
      <p>00058</p>
      <p>00059</p>
      <p>00060</p>
      <p>00061</p>
      <p>00062</p>
      <p>00063</p>
      <p>00064</p>
      <p>00065</p>
      <p>00066</p>
      <p>00067</p>
      <p>00068</p>
      <p>00069</p>
      <p>00070</p>
      <p>00071</p>
      <p>00072</p>
      <p>00073</p>
      <p>00074</p>
      <p>00075</p>
      <p>00076</p>
      <p>00077</p>
      <p>00078</p>
      <p>00079</p>
      <p>00080</p>
      <p>00081</p>
      <p>00082</p>
      <p>00083</p>
      <p>00084</p>
      <p>00085</p>
      <p>00086</p>
      <p>00087</p>
      <p>00088</p>
      <p>00089</p>
      <p>00090</p>
      <p>00091</p>
      <p>00092</p>
      <p>00093</p>
      <p>00094</p>
      <p>00095</p>
      <p>00096</p>
      <p>00097</p>
      <p>00098</p>
      <p>00099</p>
      <p>00100</p>
      <p>00101</p>
      <p>00102</p>
      <p>00103</p>
      <p>00104</p>
      <p>00105</p>
      <p>00106</p>
      <p>00107</p>
      <p>00108</p>
      <p>00109</p>
      <p>00110</p>
      <p>00111</p>
      <p>00112</p>
      <p>00113</p>
      <p>00114</p>
      <p>00115</p>
      <p>00116</p>
      <p>00117</p>
      <p>00118</p>
      <p>00119</p>
      <p>00120</p>
      <p>00121</p>
      <p>00122</p>
      <p>00123</p>
      <p>00124</p>
      <p>00125</p>
      <p>00126</p>
      <p>00127</p>
      <p>00128</p>
      <p>00129</p>
      <p>00130</p>
      <p>00131</p>
      <p>00132</p>
      <p>00133</p>
      <p>00134</p>
      <p>00135</p>
      <p>00136</p>
      <p>00137</p>
      <p>00138</p>
      <p>00139</p>
      <p>00140</p>
      <p>00141</p>
      <p>00142</p>
      <p>00143</p>
      <p>00144</p>
      <p>00145</p>
      <p>00146</p>
      <p>00147</p>
      <p>00148</p>
      <p>00149</p>
      <p>00150</p>
      <p>00151</p>
      <p>00152</p>
      <p>00153</p>
      <p>00154</p>
      <p>00155</p>
      <p>00156</p>
      <p>00157</p>
      <p>00158</p>
      <p>00159</p>
      <p>00160</p>
      <p>00161</p>
      <p>00162</p>
      <p>00163</p>
      <p>00164</p>
      <p>00165</p>
      <p>00166</p>
      <p>00167</p>
      <p>00168</p>
      <p>00169</p>
      <p>00170</p>
      <p>00171</p>
      <p>00172</p>
      <p>00173</p>
      <p>00174</p>
      <p>00175</p>
      <p>00176</p>
      <p>00177</p>
      <p>00178</p>
      <p>00179</p>
      <p>00180</p>
      <p>00181</p>
      <p>00182</p>
      <p>00183</p>
      <p>00184</p>
      <p>00185</p>
      <p>00186</p>
      <p>00187</p>
      <p>00188</p>
      <p>00189</p>
      <p>00190</p>
      <p>00191</p>
      <p>00192</p>
      <p>00193</p>
      <p>00194</p>
      <p>00195</p>
      <p>00196</p>
      <p>00197</p>
      <p>00198</p>
      <p>00199</p>
      <p>00200</p>
    </div>
  </div>
  <script>

    /*
    * 0.5s的时间，回到顶部
    * */
    (function(){

      let oToTop = document.getElementById("toTop");

      oToTop.onclick = function(){
        //滚动高度
        let sTop = document.documentElement.scrollTop;

        //初始时间
        let s = new Date();

        (function m(){

          let n = new Date();

          // 已经过的时间 / 总规定的时间
          let prop = Math.min( (n - s)/500 , 1 );

          //改变滚动高
          document.documentElement.scrollTop = (1-prop) * sTop;

          //当prop === 1，就不会往后走了，也就是动画停止了
          (prop !== 1) && requestAnimationFrame(m);

        })();

      };

    })();


  </script>
</body>
</html>
  • 案例–模拟动画(了解)
<!DOCTYPE html>
<html lang="zh-cn">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    *{margin:0;padding:0;font-family:"Microsoft Yahei";}
    body{
      overflow: hidden;
    }
    #ball{
      position: fixed;
      bottom: 0;
      width: 50px;
      height: 50px;
      background: pink;
      border-radius: 50%;
      margin: 0 auto;
    }
  </style>
</head>
<body>
  <div id="ball"></div>
  <script>
    let maxHeight = document.documentElement.clientHeight - 50;
    ball.style.bottom = maxHeight + "px";
    let Y = maxHeight;
    let V = 0;

    let g = 0.001;

    let startTime = new Date();
    (function m(){

      let nowTime = new Date();

      let t_ = nowTime-startTime;

      let S = V*t_ + (1/2*g*t_*t_);

      let pos = Y - S;

      if (pos <= 0){
        startTime = new Date();
        V = -(V + g*t_)*0.8;
        Y = 0;

        Math.abs(V)>=0.05 && requestAnimationFrame(m);
      }else{
        requestAnimationFrame(m);
      }

      ball.style.bottom = pos + "px";


    })();
      
  </script>
</body>
</html>
  • 特殊的获取方式
onsole.log(document.title);//title的文本内容

console.log(document.head);//head
console.log(document.body);//body
console.log(document.documentElement);//html
皮卡卡卡
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
微信小程序实现动态获取元素宽高的方法分析
10-17
在微信小程序中，动态获取元素宽高是一项关键的开发任务，尤其对于布局和交互设计至关重要。本文将深入探讨如何在微信小程序中实现这一功能，并提供相关的操作技巧和注意事项。 微信小程序提供了`wx....
Android编程获取控件宽和高的方法总结分析
09-02
在Android编程中，获取控件的宽和高是一项常见的需求，尤其是在自定义视图或者进行布局动态计算时。然而，由于Android UI渲染的机制，直接在`onCreate()`方法中获取控件的尺寸通常会得到0，因为此时视图还没有完成...
获取页面的各种距离
HuangChunLei_的博客
07-19 552
vue 中使用 created(){ this.listenerFunction(); }, beforeDestroy() { document.removeEventListener("scroll", this.listenerFunction); }, methods:{ listenerFunction() { document.addEventListener("scroll", this.handleScroll, true); }, handleScr
网页宽高clientWidth、offsetWidth、offsetTop 、offsetLeft宽高解析
林中明月间丶
05-18 3721
offsetLeft[Top]:只读 属性 当前元素到定位父级的距离（偏移值）到当前元素offsetLeft的距离 style.width:样式宽 clientWidth:样式宽+padding(可视区宽)（如果有滚动条还要包括滚动条的宽度） offsetWidth:样式宽+padding(可视区宽)+border(边框)、(不包括margin) scrollWidt......
uni-app：获取元素宽高
weixin_46001736的博客
09-28 3556
uni-app：获取元素宽高
Js获取页面的各种宽高与距离
王春燕的博客
05-23 3109
1、screen系列 screen.width: 屏幕的宽度 screen.height: 屏幕的高度 2、style系列（必须是行内设置的样式才有效） element.style.width: 当前对象的宽度 element.style.height: 当前对象的高度 ==》 jQ: $(obj).height(); 不包含补白和边框 element.style.left: 当前对象的left element.style.right: 当前对象......
原生js 获取屏幕各种宽高的方法
狼丶宇先森的网络科技空间
08-19 2782
常用的一些 获取屏幕各种宽高的方法  js 获取屏幕各种宽高的方法 屏幕的有效宽高： window.screen.availHeight window.screen.availWidth 网页可见区域宽：document.body.clientWidth 网页可见区域高：document.body.clientHeight 网页可见区域宽：document.body.offsetWid...
获取各种盒子的各种宽高和距离
qq_37734787的博客
07-04 2154
// An highlighted block $(document).ready(function(){ 2 var divWidth = $("#div").width(),//width()返回元素的宽高，不包括padding/border/margin divInnerWidth = $("#div").innerWidth(),//innerWidth()返回元素...
jquery获取元素各种宽高及页面宽高总结
在北风吹起的时候加入我们的队伍 在秋雨到来的时候成为彼此的温暖
10-27 2649
转载：https://www.cnblogs.com/goloving/p/7113567.html $(function(){ var a = $("#div").width(),//width()返回元素的宽高，不包括padding/border/margin b = $("#div").innerWidth(),//innerWidth()返回元素的宽......
获取浏览器视口宽高以及元素宽高
fly_wugui的博客
07-19 7854
适用所有浏览器 var w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; var w = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeig...
react-native获取指定元素宽高位置信息
weixin_40532650的博客
10-21 1252
// 计算合适高度 const _onLayout = useCallback((e) => { let { x, y, width, height } = e.nativeEvent.layout }, []) <View onLayout={_onLayout}> ... </View>
jquery获取元素宽高，浏览器宽高，滚动距离
李小城的博客
02-19 9320
引入jquery 1.获取某个元素的宽和高 1、获取实际内容区域的宽和高：width()和height(); 2、获取实际内容区域+padding的宽和高：innerWidth()和innerHeight(); 3、获取实际内容区域+padding+border的宽和高：outerWidth()和outerHeight(); 4、获取实际内容区域+padding+bo
vue获取元素宽、高、距离左边距离,右,上距离等还有XY坐标轴的方法
10-18
本文将详细介绍如何在Vue中获取元素的宽、高、距离左边、右边、上边的距离以及XY坐标轴的位置。 首先，Vue中的`$refs`属性允许我们在模板中为元素添加引用，并在Vue实例中直接访问这些元素。例如，如果我们在模板中...
详解js动态获取浏览器或页面等容器的宽高
12-04
在Web开发中，了解如何动态获取浏览器或页面容器的宽高是至关重要的，这有助于创建响应式布局、自适应滚动条以及精确的元素定位。下面我们将深入探讨这些知识点，并通过实例演示其用法。 1. **网页可见区域尺寸** ...
juqery 学习之六 CSS--css、位置、宽高
09-05
至于元素的宽高，jQuery 提供了 `width()` 和 `height()` 方法来获取元素的宽度和高度，包括内边距但不包括边框。同时，`outerWidth()` 和 `outerHeight()` 方法则会包括边框，而 `innerWidth()` 和 `innerHeight()`...
Arco Design for Vue 3 - 快速上手指南与实战技巧
qq_42072014的博客
08-11 478
如果你在使用 TypeScript 时遇到了类型定义问题，确保你安装了正确的类型包，并且版本与 Arco Design 的版本相匹配。Arco Design for Vue 3 是一个非常强大的 UI 框架，它不仅提供了丰富的组件和功能，还有完善的文档和支持。通过本文，你已经掌握了如何快速上手 Arco Design，并学会了一些实用的技巧来提升你的开发效率。希望这些经验能帮助你在 Vue 3 的开发过程中更进一步！
05_ Electron 自定义菜单、主进程与渲染进程通信
所学所思
08-09 633
单独写在一个 js 文件中，然后再在主进程中引入labe: "文件",submenu: [label: "新建文件",},label: "编辑",submenu: [label: "复制",},submenu: [// main.js// 1、引入初始化remote 模块width:800,})// __dirname 表示获取我们当前目录， path.join 会将两个参数合并成 d://electrondemo/index.html// 打开调试模式。
vue2前端阿里云oss服务端签名直传
最新发布
weixin_74285634的博客
08-13 145
generatePresignedUrlApi是由后端提供的接口 来获取密钥。
Electron学习与总结
song854601134的博客
08-12 175
组成，‌其中Chromium负责渲染和显示Web页面，‌而Node.js则提供了主进程的功能，‌包括管理应用程序的生命周期、‌创建和控制浏览器窗口以及与操作系统交互。，‌Electron使得开发者能够保持JavaScript代码库的一致性，‌从而轻松地创建跨平台的应用程序，‌而无需具备本地开发经验。Electron的核心是由。
1、获取视窗的宽高、文档的宽高、文档滚动距离的大小，分别写原生JS和JQ中的获取方法。
03-30
获取视窗宽高： ```javascript var viewportWidth = window.innerWidth || document.documentElement.clientWidth; var viewportHeight = window.innerHeight || document.documentElement.clientHeight; ``` 获取...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值