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 !!的作用
Dec 04 Javascript
Prototype 学习 工具函数学习($w,$F方法)
Jul 12 Javascript
jQuery$命名冲突怎么办如何解决
Jan 16 Javascript
js遍历子节点子元素附属性及方法
Aug 19 Javascript
AngularJS 入门教程之事件处理器详解
Aug 19 Javascript
Node.js的环境安装配置(使用nvm方式)
Oct 11 Javascript
js表单序列化判断空值的实例
Sep 22 Javascript
vue-baidu-map 进入页面自动定位的解决方案(推荐)
Apr 28 Javascript
Vue页面骨架屏的实现方法
May 22 Javascript
用vue-cli开发vue时的代理设置方法
Sep 20 Javascript
JavaScript中.min.js和.js文件的区别讲解
Feb 13 Javascript
JS访问对象两种方式区别解析
Aug 29 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之PHP语法学习笔记1
2006/12/17 PHP
php HandlerSocket的使用
2011/05/02 PHP
php将session放入memcached的设置方法
2014/02/14 PHP
PHP类和对象相关系统函数与运算符小结
2016/09/28 PHP
PHP与Web页面交互操作实例分析
2020/06/02 PHP
RR vs IO BO3 第二场2.13
2021/03/10 DOTA
在线游戏大家来找茬II
2006/09/30 Javascript
js中几种去掉字串左右空格的方法
2006/12/25 Javascript
javascript下对于事件、事件流、事件触发的顺序随便说说
2010/07/17 Javascript
简单实用的反馈表单无刷新提交带验证
2013/11/15 Javascript
jquery实现弹出窗口效果的实例代码
2013/11/28 Javascript
js 高效去除数组重复元素示例代码
2013/12/19 Javascript
jQuery日历插件datepicker用法详解
2016/03/03 Javascript
基于JQuery的$.ajax方法进行异步请求导致页面闪烁的解决办法
2016/05/10 Javascript
判断JS对象是否拥有某属性的方法推荐
2016/05/12 Javascript
Node.js 路由的实现方法
2019/06/05 Javascript
使用Easyui实现查询条件的后端传递并自动刷新表格的两种方法
2019/09/09 Javascript
[02:55]2018DOTA2国际邀请赛勇士令状不朽珍藏Ⅲ饰品一览
2018/08/01 DOTA
Python返回真假值(True or False)小技巧
2015/04/10 Python
详解Python 序列化Serialize 和 反序列化Deserialize
2017/08/20 Python
浅谈Python peewee 使用经验
2017/10/20 Python
详解Python中的正则表达式
2018/07/08 Python
python中pip的使用和修改下载源的方法
2019/07/08 Python
python中for循环把字符串或者字典添加到列表的方法
2019/07/20 Python
Python爬虫:url中带字典列表参数的编码转换方法
2019/08/21 Python
Pycharm 2019 破解激活方法图文详解
2019/10/11 Python
Python实现RabbitMQ6种消息模型的示例代码
2020/03/30 Python
美国最大的农村生活方式零售店:Tractor Supply Company(TSC)
2017/05/15 全球购物
印度领先的眼镜电子商务网站:Lenskart
2019/12/16 全球购物
丝芙兰墨西哥官网:Sephora墨西哥
2020/05/30 全球购物
总经理助理的八要求
2013/11/12 职场文书
大学生旷课检讨书
2014/01/22 职场文书
出生公证书样本
2014/04/04 职场文书
党支部反对四风思想汇报
2014/10/10 职场文书
简易离婚协议书范本2014
2014/10/15 职场文书
2016大学生党校学习心得体会
2016/01/06 职场文书