【前言】
今天有个学生问了道问题，获取元素宽度获取的是undefined。这里简单备注，以后重点讲解下。
注意：两种方式的区别是第一种方式可以取到任何情况下的宽高，而第二种方式只能取到html内定义的宽高，而不能取到css定义的宽高。
获取html元素宽高的两种方式
// 首先是取到元素
var main = document.getElementById('main');
// 第一种方式
var mainWidth = main.offsetWidth,mainHeight = main.offsetHeight;
// 第二种方式
var mainWidth2 = main.style.width,mainHeight2 = main.style.height;
【知识点】
offsetWidth和width的区别
1.offsetWidth属性可以返回对象的padding+border+width属性值之和，style.width返回值就是定义的width属性值 2.offsetWidth属性仅是可读属性，而style.width是可读写的 3.offsetWidth属性返回值是整数，而style.width的返回值是字符串，并且带有单位 4.style.width仅能返回以style方式定义的内部样式表的width属性值
【主体】
首先看下demo
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
ul{
overflow: hidden;
}
ul li{
float: left;
list-style: none;
padding: 10px 20px;
background: rgba(0,0,0,0.3);
}
</style>
</head>
<body>
<i>这里我想获取li的宽度</i>
<ul class="list">
<li>首页</li>
<li>联系我们</li>
</ul>
<script type="text/javascript">
var li_list0 = document.querySelector(".list > li");//获取第一个li
var li_list = document.querySelectorAll(".list > li");//获取所有li
// 1、第一种方式
console.log(li_list[0].style.width);//undefined
// 2、第二种方式
console.log(li_list[0].offsetWidth);//72
</script>
</body>
</html>
.
相关推荐
ScrollWidth 和 OffsetWidth 是两个常用的 HTML 元素属性，它们都是用于获取或设置 HTML 元素的宽度，但是它们之间存在着一些关键的差异。 首先，让我们来了解一下这两个属性的定义： * ScrollWidth：获取对象的...
在Web开发中，理解和掌握`offsetWidth`与`style.width`的区别是至关重要的，它们都是JavaScript中用于获取HTML元素尺寸的属性，但有着不同的应用场景和返回值。让我们深入探讨这两个属性，以及它们如何影响网页元素...
### 获取页面元素实际宽高的属性使用详解 在前端开发中，了解如何准确地获取页面元素的实际宽高是非常重要的。这不仅有助于我们优化页面布局，还能提高用户体验。本文将详细介绍`clientWidth`、`clientHeight`、`...
### JavaScript 获取隐藏元素 (display: none) 的高度和宽度的方法 #### 一、问题背景与需求分析 在前端开发过程中，经常会遇到需要获取隐藏元素尺寸的情况。这些元素可能因为某些逻辑原因被设置为 `display: none...
在JavaScript编程中，获取网页的宽高是一项常见的需求，特别是在页面布局、动态调整元素尺寸或者进行响应式设计时。本文将深入探讨如何利用JavaScript来获取浏览器窗口以及网页内容的宽度和高度。 首先，我们需要...
其中，`style.width` 和 `offsetWidth` 是两个常用的方法，用于获取元素的宽度。然而，这两个属性在使用时有着明显的区别，如果不了解这些差异，在实际应用中可能会导致预期之外的结果。本文将详细介绍这两个属性...
在JavaScript中，传统的做法是通过DOM元素的`.offsetWidth`或`.offsetHeight`属性获取图片的宽度和高度。或者，在使用jQuery时，我们可以用`.width()`和`.height()`方法来获取这些尺寸。然而，这种方法在图片尺寸被...
在Vue项目中，开发者经常需要获取DOM元素的宽高，以进行各种布局和交互的处理。然而，在实际操作中，可能会遇到获取的宽高不准确的问题，特别是在数据动态更新后。这个问题通常源于DOM元素尚未完成渲染，导致获取的...
文档中提到了两种主要情况：宽度和高度直接写在CSS样式表中，以及宽度和高度写在HTML元素的内联样式中。 当宽度和高度在CSS样式表中定义时，如`#div1 { width: 120px; }`，这时候通过`element.style.width`获取不到...
JavaScript 获取文本框的值和浏览器高度和宽度值 在 Web 开发中，获取文本框的值和浏览器的高度和宽度值是非常重要的。这篇文章将详细介绍如何使用 JavaScript 获取文本框的值和浏览器的高度和宽度值。 获取文本框...
在Web开发中，了解如何动态获取浏览器或页面容器的宽高是至关重要的，这有助于创建响应式布局、自适应滚动条以及精确的元素定位。下面我们将深入探讨这些知识点，并通过实例演示其用法。 1. **网页可见区域尺寸** ...
- `document.body.offsetWidth` 和 `document.body.offsetHeight`: 这两个属性返回`<body>`元素的总宽度和高度，包括边框。它们可以用于获取浏览器实际显示的页面内容宽度和高度，包括边框。 - `window....
网页元素位置(scroll、client、offsetWidth等)获取、设置详解
在前端开发中，获取浏览器窗口以及页面元素的宽高是一个经常执行的操作。原生JavaScript为我们提供了多种方法来实现这一需求。本文将详细介绍这些常用方法，并解释它们的应用场景。 1. 获取窗口可视区域的宽度和...
在JavaScript中，`style.width` 和 `offsetWidth` 都是用来获取或设置HTML元素的宽度，但它们之间存在显著的差异。以下是对这两个属性的详细解释： 1. **`style.width`** - `style.width` 返回的是CSS样式中直接...
通过JavaScript（简称JS）和jQuery这两种工具，我们可以方便地实现这一功能。 #### JavaScript获取屏幕尺寸 在原生JavaScript中，可以通过多种方法来获取屏幕的宽度和高度，具体如下： 1. **`document.body....
- **document.body.offsetWidth**: 获取的是网页正文的宽度，包括元素的边框、内边距和滚动条，单位为像素。 - **document.body.offsetHeight**: 获取的是网页正文的高度，包括元素的边框、内边距和滚动条，单位为...
在网页设计中，`min-width` 和 `max-width` 是两个非常重要的CSS属性，它们用于定义元素的最小和最大宽度，以确保元素在不同屏幕尺寸和设备上保持良好的布局和可读性。然而，这两个属性在早期的Internet Explorer...
使用JavaScript（简称JS），开发者可以通过多种方式获取屏幕的高度和宽度，以及页面元素的尺寸信息。 首先，要获取屏幕的宽度和高度，可以使用window对象提供的screen属性。具体来说，可以使用window.screen.width...