js获取Html元素的实际宽度高度的方法


Posted in Javascript onMay 19, 2016

第一种情况就是宽高都写在样式表里,就比如#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; //宽度

以上这篇js获取Html元素的实际宽度高度的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
比较详细的javascript对象的property和prototype是什么一种关系
Aug 06 Javascript
JavaScript Konami Code 实现代码
Jul 29 Javascript
javascript attachEvent绑定多个事件执行顺序问题
Oct 20 Javascript
jquery获取css中的选择器(实例讲解)
Dec 02 Javascript
用javascript将数据导入Excel示例代码
Sep 10 Javascript
JavaScript的jQuery库中function的存在和参数问题
Aug 13 Javascript
概述BootStrap中role="form"及role作用角色
Dec 08 Javascript
动态加载、移除js/css文件的示例代码
Mar 20 Javascript
详解VUE里子组件如何获取父组件动态变化的值
Dec 26 Javascript
jQuery选择器之层次选择器用法实例分析
Feb 19 jQuery
2020京东618叠蛋糕js脚本(亲测好用)
Jun 02 Javascript
VUE使用 wx-open-launch-app 组件开发微信打开APP功能
Aug 11 Javascript
js获取隐藏元素宽高的实现方法
May 19 #Javascript
jquery实现无刷新验证码的简单实例
May 19 #Javascript
AngularJs解决跨域问题案例详解(简单方法)
May 19 #Javascript
JavaScript:Array类型全面解析
May 19 #Javascript
JavaScript:Date类型全面解析
May 19 #Javascript
javascript中对Date类型的常用操作小结
May 19 #Javascript
JS Attribute属性操作详解
May 19 #Javascript
You might like
php使用百度天气接口示例
2014/04/22 PHP
CI框架中zip类应用示例
2014/06/17 PHP
PHP中字符与字节的区别及字符串与字节转换示例
2016/10/15 PHP
laravel5 Eloquent 实现事务方式
2019/10/21 PHP
PHP超全局变量实现原理及代码解析
2020/09/01 PHP
使用js检测浏览器的实现代码
2013/05/14 Javascript
javascript 用函数语句和表达式定义函数的区别详解
2014/01/06 Javascript
iframe父页面获取子页面参数的方法
2014/02/21 Javascript
IE8下Jquery获取select选中的值post到后台报错问题
2014/07/02 Javascript
JQuery创建DOM节点的方法
2015/06/11 Javascript
angularjs创建弹出框实现拖动效果
2020/08/25 Javascript
详解Javascript中的Object对象
2016/02/28 Javascript
JS表格组件神器bootstrap table详解(强化版)
2016/05/26 Javascript
JS实现根据密码长度显示安全条功能
2017/03/08 Javascript
React native ListView 增加顶部下拉刷新和底下点击刷新示例
2018/04/27 Javascript
Vue官方推荐AJAX组件axios.js使用方法详解与API
2018/10/09 Javascript
JS/CSS实现字符串单词首字母大写功能
2019/09/03 Javascript
如何在postman中添加cookie信息步骤解析
2020/06/30 Javascript
[28:42]Ti4正赛VG vs NEWBEE1
2014/07/19 DOTA
CentOS中使用virtualenv搭建python3环境
2015/06/08 Python
Python基于select实现的socket服务器
2016/04/13 Python
Python文本相似性计算之编辑距离详解
2016/11/28 Python
python僵尸进程产生的原因
2017/07/21 Python
Python基于回溯法子集树模板解决野人与传教士问题示例
2017/09/11 Python
Java分治归并排序算法实例详解
2017/12/12 Python
python3+PyQt5+Qt Designer实现扩展对话框
2018/04/20 Python
python脚本调用iftop 统计业务应用流量的思路详解
2019/10/11 Python
英国优质鞋类专家:Robinson’s Shoes
2017/12/08 全球购物
高中生校园生活自我评价
2013/09/19 职场文书
汽车专业毕业生推荐信
2013/11/12 职场文书
关爱残疾人演讲稿
2014/05/24 职场文书
商务英语专业毕业生求职信
2014/07/06 职场文书
村长反四风问题个人对照检查材料
2014/09/21 职场文书
预防艾滋病宣传活动总结
2015/05/09 职场文书
朋友聚会开场白
2015/06/01 职场文书
祝福语集锦:送给毕业同学祝福语
2019/11/21 职场文书