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、js调用iframe父窗口与子窗口元素的方法整理
Jul 31 Javascript
举例讲解JavaScript substring()的使用方法
Nov 09 Javascript
jQuery插件开发精品教程让你的jQuery提升一个台阶
Jan 27 Javascript
jQuery EasyUI中DataGird动态生成列的方法
Apr 05 Javascript
微信小程序实现图片轮播及文件上传
Apr 07 Javascript
JavaScript实现精美个性导航栏筋斗云效果
Oct 29 Javascript
简单了解小程序+node梳理登陆流程
Jun 24 Javascript
Layui数据表格判断编辑输入的值,是否为我需要的类型详解
Oct 26 Javascript
Vue 实现把表单form数据 转化成json格式的数据
Oct 29 Javascript
Vue父组件向子组件传值以及data和props的区别详解
Mar 02 Javascript
微信小程序实现上拉加载功能示例【加载更多数据/触底加载/点击加载更多数据】
May 29 Javascript
CocosCreator入门教程之网络通信
Apr 16 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 缓冲的免费实现方法
2006/10/09 PHP
PHP 防注入函数(格式化数据)
2011/08/08 PHP
解析PHPExcel使用的常用说明以及把PHPExcel整合进CI框架的介绍
2013/06/24 PHP
php中单个数据库字段多列显示(单字段分页、横向输出)
2014/07/28 PHP
php输出全球各个时区列表的方法
2015/03/31 PHP
PHP jQuery+Ajax结合写批量删除功能
2017/05/19 PHP
广告显示判断
2006/08/31 Javascript
屏蔽网页右键复制和ctrl+c复制的js代码
2013/01/04 Javascript
原始的js代码和jquery对比体会
2013/09/10 Javascript
JS判断当前页面是否在微信浏览器打开的方法
2015/12/08 Javascript
JS实现1000以内被3或5整除的数字之和
2016/02/18 Javascript
BootStrap使用popover插件实现鼠标经过显示并保持显示框
2016/06/23 Javascript
js绘制购物车抛物线动画
2020/11/18 Javascript
JavaScript简单拖拽效果(1)
2017/05/17 Javascript
jquery插件开发之选项卡制作详解
2017/08/30 jQuery
vue-cli配置全局sass、less变量的方法
2019/06/06 Javascript
vue 实现用户登录方式的切换功能
2020/04/14 Javascript
[03:37]2014DOTA2国际邀请赛 主赛事第一日胜者组TOPPLAY
2014/07/19 DOTA
老生常谈python函数参数的区别(必看篇)
2017/05/29 Python
Python自动发送邮件的方法实例总结
2018/12/08 Python
Python requests模块实例用法
2019/02/11 Python
python儿童学游戏编程知识点总结
2019/06/03 Python
django与vue的完美结合_实现前后端的分离开发之后在整合的方法
2019/08/12 Python
Python垃圾回收机制三种实现方法
2020/04/27 Python
python 如何上传包到pypi
2020/12/24 Python
CSS3 伪类选择器 nth-child()说明
2010/07/10 HTML / CSS
Brora官网:英国领先的羊绒服装品牌
2019/08/28 全球购物
美国购买体育、音乐会和剧院门票网站:SelectATicket
2019/09/08 全球购物
财务管理专业毕业生求职信范文
2013/09/21 职场文书
学校春季防火方案
2014/06/08 职场文书
2014幼儿园家长工作总结
2014/11/10 职场文书
2014年收银工作总结
2014/11/13 职场文书
2015年财务人员工作总结
2015/04/10 职场文书
居安思危观后感
2015/06/11 职场文书
《学会生存》读后感3篇
2019/12/09 职场文书
TensorFlow的自动求导原理分析
2021/05/26 Python