【前言】
今天有个学生问了道问题，获取元素宽度获取的是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元素尺寸的属性，但有着不同的应用场景和返回值。让我们深入探讨这两个属性，以及它们如何影响网页元素...
在JavaScript编程中，获取网页的宽高是一项常见的需求，特别是在页面布局、动态调整元素尺寸或者进行响应式设计时。本文将深入探讨如何利用JavaScript来获取浏览器窗口以及网页内容的宽度和高度。 首先，我们需要...
JavaScript 获取文本框的值和浏览器高度和宽度值 在 Web 开发中，获取文本框的值和浏览器的高度和宽度值是非常重要的。这篇文章将详细介绍如何使用 JavaScript 获取文本框的值和浏览器的高度和宽度值。 获取文本框...
在Vue项目中，开发者经常需要获取DOM元素的宽高，以进行各种布局和交互的处理。然而，在实际操作中，可能会遇到获取的宽高不准确的问题，特别是在数据动态更新后。这个问题通常源于DOM元素尚未完成渲染，导致获取的...
首先说一下js动态获取浏览器或页面等容器的宽高的方法大体有哪些： 网页可见区域宽： document.body.clientWidth 网页可见区域高： document.body.clientHeight 网页可见区域宽： document.body.offsetWidth ...
网页元素位置(scroll、client、offsetWidth等)获取、设置详解
在JavaScript中，`style.width` 和 `offsetWidth` 都是用来获取或设置HTML元素的宽度，但它们之间存在显著的差异。以下是对这两个属性的详细解释： 1. **`style.width`** - `style.width` 返回的是CSS样式中直接...
小结，因为id.offsetWidth和id.offsetHeight无视样式写在样式表还是行内，所以我们获取元素宽和高的时候最好用这2个属性。注意如果不是写在行内style中的属性都不能通过id.style.atrr来获取。 现 在的前端制作很少...
本文将详细介绍几种使用 JavaScript 获取网页宽高的方法，并对比不同浏览器下的表现。 1. `document.body.clientWidth` 和 `document.body.clientHeight` 这两个属性分别返回网页可见区域的宽度和高度，不包括滚动...
在网页设计中，`min-width` 和 `max-width` 是两个非常重要的CSS属性，它们用于定义元素的最小和最大宽度，以确保元素在不同屏幕尺寸和设备上保持良好的布局和可读性。然而，这两个属性在早期的Internet Explorer...
此外，在 HTML 文档中，我们还可以使用其他属性来获取元素的坐标，例如 offsetWidth 和 offsetHeight 属性可以获取元素的宽度和高度，而 clientWidth 和 clientHeight 属性可以获取元素的可见宽度和高度。...
2. offsetWidth 和 offsetHeight：获取元素的宽度和高度，包括边框、padding、margin 等。 3. clientWidth 和 clientHeight：获取元素的宽度和高度，excluding 边框、padding、margin 等。 4. scrollTop 和 ...
首先，元素的宽度可以通过`offsetWidth`和`offsetHeight`属性获取，这两个属性包含了元素自身的width、height以及padding和border的大小。例如： ```javascript var div = document.getElementsByTagName('div')[0]...
说明：1、因为获取高度的情况跟获取...在JQuery中表示JQuery对象 Width -> obj.style.width OffsetWidth -> obj.offsetWidth $width -> obj.width() $innerWidth -> obj.innerWidth() $outerWidth -> obj.outerWidth()
"实现DOM等比例宽高"这个话题主要关注如何让DOM元素在宽度改变时，高度能自动按比例调整，保持原有的纵横比，避免因宽高不匹配导致的元素变形。这个问题在处理图片、视频或自定义内容区域时尤其重要。 首先，我们...
- `getHeight()`，`getWidth()`：获取元素的offsetHeight和offsetWidth。 - `getPadding()`：获取元素的padding值。 - `getSize()`：获取元素的尺寸。 - `getTextWidth()`：返回文本的宽度。 - `...
这个文档主要总结了ExtJS中的常用方法，涉及页面元素获取、DOM操作、样式操作、对齐和尺寸操作等多个方面。 1. 页面元素获取： - `Ext.get()`：这是一个获取页面元素的方法，但因为消耗内存，不推荐频繁使用。 - ...