`
阅读更多
【前言】       今天有个学生问了道问题,获取元素宽度获取的是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>       .
分享到:
评论
相关资源推荐
  • js获取Html元素的实际宽度高度(offsetWidth 第一种情况就是宽高都写在样式表里,就比如#div1{width:120px;}。这中情况通过#div1.style.width拿不到宽度,而通过#div1.offsetWidth才可以获取到宽度。 第二种情况就是宽和高是写在行内中,比如style="width:120px;",这中情况通过上述2个方法都能拿到宽度。 小结,因为id.offsetWidth和id.offsetHeight
  • JS中的位置和宽度:clientWidthoffsetWidth、scrollWidth区别    首先定义一个div。 然后稍微装修一下 下面开始区分     一、clientWidth和clientHeigh 、 clientTop和clientLeft         1,clientWidth的实际宽度         clientWidthwidth+左右padding         2,clientHeigh的实际高度          clien...
  • 试谈style.widthoffsetWidth对设置对象宽度区别 昨天被人叫过去看一个bug。他的bug有一处是这样的:img.style.width = div.style.width / 2; img.style.height = div.style.width / 2;在跟他说明宽度不能用这种方式来设置要用offsetWidth或者offsetHeight 设置之后他问了我一句 为啥同样都是宽度,为啥不能用这种宽度设置要用那种方式设置呢
  • js style.width获取不到元素的宽度 jquery用习惯了,用width()就能获取元素的宽度,但有些时候用js获取元素宽度获取不到,document.getElementById(&quot;id&quot;).style.width,原因:1.元素未设置宽度值2.元素设置了宽度值,但,设置在内联或外联样式表中,而非内嵌式的。虽然这种方式获取不到元素宽度,但是可以设置宽度 document.getElementById(&quot;id&quot;).style.widt...
  • offsetWidth 值为 0 ,明明有值 __.offsetWidth = 0; 因为父集用了display:none; 所以取不到值,将父集设置为display: block;就行了
  • offsetHeight,offsetWidth.....那些易混淆的几个几个知识点 html dom对象中element对象的几个属性 element.offsetHeight 返回元素的高度。 element.offsetWidth 返回元素的宽度。 element.offsetLeft 返回元素的水平偏移位置。 element.offsetParent 返回元素的偏移容器。
  • Vue动态获取width vue里想用bootstarp的进度条,<div class="progress"> <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width:
  • js获取元素宽高的方法 HTML代码:&amp;lt;section class=&quot;sec&quot; style=&quot;width: 400px;&quot;&amp;gt; &amp;lt;style type=&quot;text/css&quot;&amp;gt; .sec { background-color: red; overflow: hidden; /*width: 500px;*/ } .child { background-color: yellow...
  • CSS中关于:对象.OffsetWidth和对象.Style.width区别 1.offsetWidth属性可以返回对象的padding+border+width属性值之和 style.width返回值就是定义的width属性值 2.offsetWidth属性仅是可读属性,而style.width是可读写的 3.offsetWidth属性返回值是整数,而style.width的返回值是字符串 4.style.width仅能返回以style方式定义的内部样式表的widt
  • CSS盒模型里面的几个宽度问题:offsetWidth,clientWidth,scrollWidth以及jquery的.width()函数
  • [jQuery]无法准确获取隐藏元素(display:none)宽度(width)和高度(height)的新解决方案 在开发一个弹框插件时,遇到一个需要计算隐藏弹框的高度问题。用jquery里面的方法$('box').outerHeight(true)得到隐藏层高度的值随着滚动条滚动总是不一致。没辙,放弃这一方法去获取,原来生js中的offsetHeight来试试看,$(''box")[0].offsetHeight,毫无疑问得到的值总是0。 为解决这个老大难问题,在网上看到另一较好的解决方法新增扩展jquer
  • canvas的width和height属性的特殊之处 本文介绍了canvas的width和height属性为什么要做为标签的属性写在行内及其作用,与写在css样式里的区别
  • HTML元素的宽度计算 1.HTML块级元素的宽度/高度是不包括margin,border,padding的. 如图所示: 2.JS中的offsetWidth是包括border在内的. var oDiv=document.getElementById('div1'); alert("offsetWidth="+oDiv.offsetWidth); alert("width
  • 解决使用offsetWidth让DIV自动变宽时出现的小BUG。 1.首先创建一个DIV盒子。给它加一个定时器,让它的宽度每隔30毫秒自动减1,观看效果。 2.上面的效果没有问题。然后你通过给DIV添加样式,给它加1px的边框。观看效果。 3.这是你会发现,你明明让DIV宽度减1,现在它的宽度会反而变长。 4.这是为什么呢?很明显这是加1px边框引起的问题。解释:因为offsetWidth是包含边框,外边距,内边距, 而DIV的宽度是100px。
  • JS 获取html元素宽高 及设置宽高 获取浏览器的宽高: var width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; var height = window.innerHeight || document.documentElement.clientHeight || document.bod...
  • js中image获取不到width和heigth的问题 @Author LazyChun js中image的src赋值了,而image.width == 0 &amp;amp;&amp;amp; image.height == 0 今天做一个图片上传并做宽高限制的case,结果遇到这事了,搞了老半天,后来发现要这样写: 在 image的onload函数里可以获得width与heigth的值(单位:px)。...
  • jquery 获取元素width height 小数点向上取整 今天被问到html元素width 的属性值 为100.5px时,jquery 获取时向上取整101px;做了一个测试 1 2 console.info("js "+document.getElementById("div1").style.width); console.info("jquery "+$("#div1").css("width"));
  • 关于display:none元素宽高获取问题 在做项目的时候碰到的这个问题,最后解决了,记录一下:分几种情况:1.正常情况 <div style="width:500px; height:300px;"> <div id="div1" style="width:100%; height:100%; background-color:red;"> <div id="child" style="widt
  • Html canvas的width、height与在style中设置宽高区别 转自 http://www.mamicode.com/info-detail-1663492.html 转自 http://www.cnblogs.com/JamKong/p/4987163.htmlCanvas 的width height属性当使用width height属性时,显示正常不会被拉伸<html> <body> <canvas id="mycanvas" wi
  • js怎么获取元素宽高 第一种情况就是宽高都写在样式表里,就比如#div1{width:120px;}。这中情况通过#div1.style.width拿不到宽度,而通过#div1.offsetWidth才可以获取到宽度。 第二种情况就是宽和高是写在行内中,比如style="width:120px;",这中情况通过上述2个方法都能拿到宽度。 小结,因为id.offsetWidth和id.offsetHeight
Global site tag (gtag.js) - Google Analytics