【前端】：client、offset、scroll

WEBJ2EE

发布于 2020-01-17 15:52:20

9350

发布于 2020-01-17 15:52:20

文章被收录于专栏：WebJ2EEWebJ2EE

目录
1. jQuery
    1.1. $.width()、$.height()
    1.2. $.innerWidth()、$.innerHeight()
    1.3. $.outerWidth()、$.outerHeight()
    1.4. $.outerWidth(true)、$.outerHeight(true)
2. 原生操作
    2.1. offsetWidth、offsetHeight
    2.2. clientWidth、clientHeight
    2.3. scrollWidth、scrollHeight
3. 几道笔试题

1. jQuery

1.1. $.width()、$.height()

Get the current computed width for the first element in the set of matched elements.

Note that .width() will always return the content width, regardless of the value of the CSS box-sizing property.
dimensions may be incorrect when the page is zoomed by the user; browsers do not expose an API to detect this condition.
The value reported by .width() is not guaranteed to be accurate when the element or its parent is hidden.

1.2. $.innerWidth()、$.innerHeight()

Get the current computed inner width for the first element in the set of matched elements, including padding but not border.

This method returns the width of the element, including left and right padding, in pixels.
dimensions may be incorrect when the page is zoomed by the user; browsers do not expose an API to detect this condition.
The value reported by .innerWidth() is not guaranteed to be accurate when the element or its parent is hidden. To get an accurate value, ensure the element is visible before using .innerWidth().

1.3. $.outerWidth()、$.outerHeight()

1.4. $.outerWidth(true)、$.outerHeight(true)

Get the current computed outer width (including padding, border, and optionally margin) for the first element in the set of matched elements.

Returns the width of the element, including left and right padding, border, and optionally margin, in pixels.
dimensions may be incorrect when the page is zoomed by the user; browsers do not expose an API to detect this condition.
The value reported by .outerWidth() is not guaranteed to be accurate when the element or its parent is hidden. To get an accurate value, ensure the element is visible before using .outerWidth().

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title></title>
  <script type="text/javascript" src="jquery-1.12.4.js"></script>
  <style>
    div {
      width: 100px;
      height: 100px;
      padding: 20px;
      border: 2px solid blue;
      margin: 20px;
      background-color: grey;
    }

    span {
      font-size: 15px;
      line-height: 10px;
      padding: 20px;
      border: 2px solid blue;
      margin: 20px;
      background-color: green;
    }
</style>
</head>
<body>
  <div id="div1">div1</div>
  <div id="div2" style="box-sizing: border-box;">div2</div>
  <span id="span1">SPAN</div>
  <script>
    $(function(){
      console.log("div1:width", $("#div1").width(), $("#div1").height());
      console.log("div2:width", $("#div2").width(), $("#div2").height());
      console.log("span1:width", $("#span1").width(), $("#span1").height());

      console.log("div1:innerWidth", $("#div1").innerWidth(), $("#div1").innerHeight());
      console.log("div2:innerWidth", $("#div2").innerWidth(), $("#div2").innerHeight());
      console.log("span1:innerwidth", $("#span1").innerWidth(), $("#span1").innerHeight());

      console.log("div1:outerWidth", $("#div1").outerWidth(), $("#div1").outerHeight());
      console.log("div2:outerWidth", $("#div2").outerWidth(), $("#div2").outerHeight());
      console.log("span1:outerwidth", $("#span1").outerWidth(), $("#span1").outerHeight());

      console.log("div1:outerWidth-true", $("#div1").outerWidth(true), $("#div1").outerHeight(true));
      console.log("div2:outerWidth-true", $("#div2").outerWidth(true), $("#div2").outerHeight(true));
      console.log("span1:outerwidth-true", $("#span1").outerWidth(true), $("#span1").outerHeight(true));      
    })
</script>
</body>
</html>

2. 原生

2.1. offsetWidth、offsetHeight

If you need to know the total amount of space an element occupies, including the width of the visible content, scrollbars (if any), padding, and border, you want to use the HTMLElement.offsetWidth and HTMLElement.offsetHeight properties.

Most of the time these are the same as width and height of Element.getBoundingClientRect(), when there aren't any transforms applied to the element. In case of transforms, the offsetWidth and offsetHeight returns the element's layout width and height, while getBoundingClientRect() returns the rendering width and height. As an example, if the element has width: 100px; and transform: scale(0.5); the getBoundingClientRect() will return 50 as the width, while offsetWidth will return 100.

Typically, offsetWidth is a measurement in pixels of the element's CSS width, including any borders, padding, and vertical scrollbars (if rendered). It does not include the width of pseudo-elements such as ::before or ::after.
If the element is hidden (for example, by setting style.display on the element or one of its ancestors to "none"), then 0 is returned.
This property will round the value to an integer. If you need a fractional value, use element.getBoundingClientRect().

2.2. clientWidth、clientHeight

If you need to know how much space the actual displayed content takes up, including padding but not including the border, margins, or scrollbars, you want to use the Element.clientWidth and Element.clientHeight properties.

The Element.clientWidth property is zero for inline elements and elements with no CSS; otherwise, it's the inner width of an element in pixels. It includes padding but excludes borders, margins, and vertical scrollbars (if present).
This property will round the value to an integer. If you need a fractional value, use element.getBoundingClientRect().

2.3. scrollWidth、scrollHeight

If you need to know the actual size of the content, regardless of how much of it is currently visible, you need to use the Element.scrollWidth and Element.scrollHeight properties. These return the width and height of the entire content of an element, even if only part of it is presently visible due to the use of scroll bars.

The Element.scrollWidth read-only property is a measurement of the width of an element's content, including content not visible on the screen due to overflow.
The scrollWidth value is equal to the minimum width the element would require in order to fit all the content in the viewport without using a horizontal scrollbar. The width is measured in the same way as clientWidth: it includes the element's padding, but not its border, margin or vertical scrollbar (if present). It can also include the width of pseudo-elements such as ::before or ::after. If the element's content can fit without a need for horizontal scrollbar, its scrollWidth is equal to clientWidth

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title></title>
  <script type="text/javascript" src="jquery-1.12.4.js"></script>
  <style>
    div {
      width: 100px;
      height: 100px;
      padding: 20px;
      border: 2px solid blue;
      margin: 20px;
      background-color: grey;
    }

    span {
      font-size: 15px;
      line-height: 10px;
      padding: 20px;
      border: 2px solid blue;
      margin: 20px;
      background-color: green;
    }
</style>
</head>
<body>
  <div id="div1">div1</div>
  <div id="div2" style="box-sizing: border-box;">div2</div>
  <div id="div3" style="display: none">div3</div>
  <div id="div4" style="overflow: hidden; text-overflow: ellipsis;">
Java 是由Sun Microsystems公司于1995年5月推出的高级程序设计语言。
Java可运行于多个平台，如Windows, Mac OS，及其他多种UNIX版本的系统。
本教程通过简单的实例将让大家更好的了解JAVA编程语言。
  </div>
  <span id="span1">SPAN</div>
  <script>
    $(function(){
      var div1 = document.getElementById("div1");
      var div2 = document.getElementById("div2");
      var div3 = document.getElementById("div3");
      var div4 = document.getElementById("div4");
      var span1 = document.getElementById("span1");
      console.log("div1:offsetWidth", div1.offsetWidth, div1.offsetHeight);
      console.log("div2:offsetWidth", div2.offsetWidth, div2.offsetHeight);  
      console.log("div3:offsetWidth", div3.offsetWidth, div3.offsetHeight);
      console.log("span1:offsetWidth", span1.offsetWidth, span1.offsetHeight);  
      console.log("div1:clientWidth", div1.clientWidth, div1.clientHeight);
      console.log("div2:clientWidth", div2.clientWidth, div2.clientHeight);  
      console.log("div3:clientWidth", div3.clientWidth, div3.clientHeight);
      console.log("span1:clientWidth", span1.clientWidth, span1.clientHeight);
      console.log("div1:scrollWidth", div1.scrollWidth, div1.scrollHeight);
      console.log("div2:scrollWidth", div2.scrollWidth, div2.scrollHeight);  
      console.log("div3:scrollWidth", div3.scrollWidth, div3.scrollHeight);
      console.log("div4:scrollWidth", div4.scrollWidth, div4.scrollHeight);
      console.log("span1:scrollWidth", span1.scrollWidth, span1.scrollHeight);  
    })
</script>
</body>
</html>

3. 几道笔试题

题目01：

题目02：

参考：

《CSS 权威指南第四版》《前端程序员面试笔试真题与解析》 Determining the dimensions of elements： https://developer.mozilla.org/en-US/docs/Web/API/CSS_Object_Model/Determining_the_dimensions_of_elements Measuring Element Dimension and Location with CSSOM in Windows Internet Explorer 9： https://docs.microsoft.com/en-us/previous-versions//hh781509(v=vs.85)

本文参与腾讯云自媒体分享计划，分享自微信公众号。

原始发表：2020-01-06，如有侵权请联系 cloudcommunity@tencent.com 删除

api

css

本文分享自 WebJ2EE 微信公众号，前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体分享计划，欢迎热爱写作的你一起参与！

api

css

登录后参与评论

0 条评论

热度

【前端】：client、offset、scroll

【前端】：client、offset、scroll

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐