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 单例/单体模式(Singleton)
Apr 07 Javascript
jQuery点击弹出下拉菜单的小例子
Aug 01 Javascript
window.location.href中url中数据量太大时的解决方法
Dec 23 Javascript
js对象内部访问this修饰的成员函数示例
Apr 27 Javascript
jquery判断元素是否隐藏的多种方法
May 06 Javascript
JavaScript学习心得之概述
Jan 20 Javascript
JS中Location使用详解
May 12 Javascript
轻松理解JavaScript闭包
Mar 14 Javascript
Node.js操作redis实现添加查询功能
May 25 Javascript
在Swiper内如何制作CSS3动画效果示例代码
Dec 07 Javascript
layui.tree组件的使用以及搜索节点功能的实现
Sep 26 Javascript
vue使用showdown并实现代码区域高亮的示例代码
Oct 17 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
dede3.1分页文字采集过滤规则详说(图文教程)续二
2007/04/03 PHP
PHP生成Flash动画的实现代码
2010/03/12 PHP
php+html5使用FormData对象提交表单及上传图片的方法
2015/02/11 PHP
Yii2超好用的日期和时间组件(值得收藏)
2016/05/05 PHP
PHP实现APP微信支付的实例讲解
2018/02/10 PHP
一个选择最快的服务器转向代码
2009/04/27 Javascript
自己动手制作jquery插件之自动添加删除行的实现
2011/10/13 Javascript
document.write的几点使用心得
2014/05/14 Javascript
chrome下img加载对height()的影响示例探讨
2014/05/26 Javascript
浅析JavaScript中的事件机制
2015/06/04 Javascript
Javascript将数值转换为金额格式(分隔千分位和自动增加小数点)
2016/06/22 Javascript
jQuery获取select选中的option的value值实现方法
2016/08/29 Javascript
JS组件系列之MVVM组件构建自己的Vue组件
2017/04/28 Javascript
nodejs中解决异步嵌套循环和循环嵌套异步的问题
2017/07/12 NodeJs
微信小程序 转发功能的实现
2017/08/04 Javascript
JScript实现表格的简单操作
2017/08/15 Javascript
Vue面试题及Vue知识点整理
2018/10/07 Javascript
Vue-CLI 项目在pycharm中配置方法
2019/08/30 Javascript
Vue 使用Props属性实现父子组件的动态传值详解
2019/11/13 Javascript
[01:19:23]2018DOTA2亚洲邀请赛 4.5 淘汰赛 Mineski vs VG 第二场
2018/04/06 DOTA
Python3.4编程实现简单抓取爬虫功能示例
2017/09/14 Python
Python 打印中文字符的三种方法
2018/08/14 Python
纯CSS3实现表单验证效果(非常不错)
2017/01/18 HTML / CSS
世界最大域名注册商:GoDaddy
2016/07/24 全球购物
印度尼西亚最完整和最大的在线药房网站:Farmaku.com
2019/11/23 全球购物
奶茶店创业计划书范文
2014/01/17 职场文书
2015年幼儿园毕业感言
2014/02/12 职场文书
党风廉政承诺书
2014/03/27 职场文书
婚前协议书
2014/04/15 职场文书
机电一体化应届生求职信
2014/08/09 职场文书
预备党员介绍人意见
2015/06/01 职场文书
幼儿园六一儿童节开幕词
2016/03/04 职场文书
2019幼儿园感恩节活动策划书
2019/11/28 职场文书
个人销售励志奋斗口号
2019/12/05 职场文书
Python实现双向链表基本操作
2022/05/25 Python
如何用H5实现好玩的2048小游戏
2022/07/23 HTML / CSS