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 相关文章推荐
用jquery实现自定义风格的滑动条实现代码
Apr 26 Javascript
IE6下拉框图层问题探讨及解决
Jan 03 Javascript
jQuery中offsetParent()方法用法实例
Jan 19 Javascript
JavaScript使用DeviceOne开发实战(一) 配置和起步
Dec 01 Javascript
jQuery实现简单隔行变色的方法
Feb 20 Javascript
由简入繁实现Jquery树状结构的方法(推荐)
Jun 10 Javascript
在页面中引入js的两种方法(推荐)
Aug 29 Javascript
vue2实现数据请求显示loading图
Nov 28 Javascript
详解vuex持久化插件解决浏览器刷新数据消失问题
Apr 15 Javascript
解决Vue.js应用回退或刷新界面时提示用户保存修改问题
Nov 24 Javascript
小程序外卖订单界面的示例代码
Dec 30 Javascript
微信小程序picker组件两列关联使用方式
Oct 27 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
中国收音机工业发展史
2021/03/02 无线电
thinkphp实现上一篇与下一篇的方法
2014/12/08 PHP
浅析Laravel5中队列的配置及使用
2016/08/04 PHP
zend框架实现支持sql server的操作方法
2016/12/08 PHP
PHP+MySQL使用mysql_num_rows实现模糊查询图书信息功能
2018/05/31 PHP
Laravel路由研究之domain解决多域名问题的方法示例
2019/04/04 PHP
微信公众平台开发教程③ PHP实现微信公众号支付功能图文详解
2019/04/10 PHP
编写跨浏览器的javascript代码必备[js多浏览器兼容写法]
2008/10/29 Javascript
深入理解JavaScript编程中的同步与异步机制
2015/06/24 Javascript
谈谈JavaScript类型系统之Math
2016/01/06 Javascript
Node.js编写爬虫的基本思路及抓取百度图片的实例分享
2016/03/12 Javascript
jQuery新窗口打开外链接
2016/07/21 Javascript
JavaScript比较两个数组的内容是否相同(推荐)
2017/05/02 Javascript
EasyUI Datebox 日期验证之开始日期小于结束时间
2017/05/19 Javascript
AngularJS 验证码60秒倒计时功能的实现
2017/06/05 Javascript
JS实现table表格固定表头且表头随横向滚动而滚动
2017/10/26 Javascript
JS设计模式之状态模式概念与用法分析
2018/02/05 Javascript
webpack 打包压缩js和css的方法示例
2018/03/20 Javascript
angular2模块和共享模块详解
2018/04/08 Javascript
node.js学习笔记之koa框架和简单爬虫练习
2018/12/13 Javascript
Paypal支付不完全指北
2020/06/04 Javascript
JavaScript实现雪花飘落效果
2020/12/27 Javascript
python实现zencart产品数据导入到magento(python导入数据)
2014/04/03 Python
Python解析xml中dom元素的方法
2015/03/12 Python
Python实现截屏的函数
2015/07/26 Python
python在不同层级目录import模块的方法
2016/01/31 Python
Python连接DB2数据库
2016/08/27 Python
Python实现处理逆波兰表达式示例
2018/07/30 Python
Python使用Flask-SQLAlchemy连接数据库操作示例
2018/08/31 Python
python实现简单的单变量线性回归方法
2018/11/08 Python
python多线程抽象编程模型详解
2019/03/20 Python
Python读取xlsx数据生成图标代码实例
2020/08/12 Python
上海某公司.net方向笔试题
2014/09/14 面试题
大学校运会广播稿
2014/02/03 职场文书
任命书模板
2014/06/04 职场文书
2016大学迎新晚会开场白
2015/11/24 职场文书