原生js获取Html元素的实际宽度高度

时间:2021-09-28 17:32:12

第一种情况就是宽高都写在样式表里,就比如#div1{width:120px;}。这中情况通过#div1.style.width拿不到宽度,而通过#div1.offsetWidth才可以获取到宽度。

第二种情况就是宽和高是写在行内中,比如style="width:120px;",这中情况通过上述2个方法都能拿到宽度。

小结,因为id.offsetWidth和id.offsetHeight无视样式写在样式表还是行内,所以我们获取元素宽和高的时候最好用这2个属性。注意如果不是写在行内style中的属性都不能通过id.style.atrr来获取。


在的前端制作很少直接把样式写style里了,都是写在样式表里。如果你要获取的样式没有相对应的(就像#div1.style.width对
应#div1.offsetWidth),就只能分别针对不用浏览器来获取样式表的属性了,可以试着搜索“JS 获取样式属性”之类的。

代码:
var o = document.getElementById("view");
var h = o.offsetHeight;  //高度
var w = o.offsetWidth;  //宽度

本文转自:http://www.cnblogs.com/zhwl/p/3858682.html

原生js获取Html元素的实际宽度高度的更多相关文章

  1. js获取Html元素的实际宽度高度

    第一种情况就是宽高都写在样式表里,就比如#div1{width:120px;}.这中情况通过#div1.style.width拿不到宽度,而通过#div1.offsetWidth才可以获取到宽度. 第 ...

  2. [JavaScript] js获取Html元素的实际宽度高度

    第一种情况就是宽高都写在样式表里,就比如#div1{width:120px;}.这中情况通 过#div1.style.width拿不到宽度,而通过#div1.offsetWidth才可以获取到宽度. ...

  3. 关于Echarts的原生js获取DOM元素与动态加载DOM元素的冲突问题

    1.前言: 最近在做的看板项目,因为需要循环加载后台数据,并且用Echarts做数据呈现,所以jQuery和angular等库统统靠边站,Echarts用的是原生js获取DOM元素,至于诸多不兼容等深 ...

  4. 原生js获取子元素

    感谢原文作者:归一山人 原文链接:https://www.cnblogs.com/guiyishanren/p/12214757.html 获取子元素的方法有 //获取第一个demo类 dom = d ...

  5. 原生js获取子元素、给元素增加div

    //鼠标移入移出动画 解决页面闪屏问题 window.onload = function () { var el = document.createElement('div'); el.classNa ...

  6. js获取浏览器body或窗宽度高度合集

    <script type="text/javascript"> var s = " "; document.documentElement.scro ...

  7. JS获取DOM元素的八种方法

    JS获取DOM元素的方法(8种) 通过ID获取(getElementById) 通过name属性(getElementsByName) 通过标签名(getElementsByTagName) 通过类名 ...

  8. 原生JS获取元素宽高实践详解

    开篇的话 任何不是亲身实践中求得的知识,都不是属于你的.任何求得的知识不去时常温习运用,也不是属于你的. 记录由来 在做个上拉广告功能中遇到了一个"理所当然"觉得对的用法,慢慢才排 ...

  9. 原生js获取元素的样式信息

    工作中经常会需要获取DOM元素的样式,之前都是通过jquery的css()方法,现在总结一下通过原生js获取元素样式的方法. obj.style js var _width = obj.style.w ...

随机推荐

  1. Python3基础 set&lpar;&rpar; 删除一个列表中的重复项

    镇场诗: 诚听如来语,顿舍世间名与利.愿做地藏徒,广演是经阎浮提. 愿尽吾所学,成就一良心博客.愿诸后来人,重现智慧清净体.-------------------------------------- ...

  2. SQL&lowbar;Join 小总结

    原文出自 :http://www.nowamagic.net/librarys/veda/detail/936 对于SQL的Join,在学习起来可能是比较乱的.我们知道,SQL的Join语法有很多in ...

  3. 完整的多文件上传实例&lpar;java版&rpar;

    昨天刚刚做了一个文件列表上传,后端很简单,用 MultipartFile[] files 获取文件流数组,后端就当IO流操作就可以,似乎好像没啥好写的,但是!!!!!前端是真的糙单.要是自己写一个前端 ...

  4. js 获取对象属性个数

    js 获取对象属性个数 方法一: var attributeCount = function(obj) { var count = 0; for(var i in obj) { if(obj.hasO ...

  5. shell 判断目录是否存在

    判断/data/www/logs/wos_log/crontab_log是否, 如果不存在则新建 if [ ! -d "/data/www/logs/wos_log/crontab_log& ...

  6. STM32(HY-SRF05)超声波测距项目

    参考资料: https://www.cnblogs.com/qsyll0916/p/6964638.html http://blog.csdn.net/zhangdaxia2/article/deta ...

  7. luogu1072 &lbrack;NOIp2009&rsqb;Hankson的趣味题 &lpar;数学&plus;STL&colon;&colon;set&rpar;

    一个JSB做法 由$\frac{x*b0}{gcd(x,b0)}=b1$,可得$\frac{x}{gcd(x,b0)}=\frac{b1}{b0}$ 设$b2=\frac{b1}{b0}$ 所以对$b ...

  8. js命名空间写法

    很早知道这种写法,由于基础面向对象不够扎实一直在回避,但是面对整站这种方法还是有必要会 <div id="div1">111</div> <div i ...

  9. 【JXOI2018】排序问题 贪心

    我们令$sum_i$表示数字i在加完数字的数列中出现的次数,那么答案显然为$\dfrac{(n+m)!}{\sum_{i=0}^{\infty}sum_i!}$ 不难发现,当每次添加的数为$[l,r] ...

  10. 记一次微信小程序开发

    之前在网上看到博客园新闻服务开放接口,因为自己本身有看博客园IT新闻的习惯,为了能随时随地简洁方便的浏览新闻,于是萌生了一个利用开放API开发一个微信小程序的想法. 1. mpvue初探 平时技术栈有 ...