js获取Html元素的实际宽度高度
第一种情况就是宽高都写在样式表里,就比如#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元素的实际宽度高度的更多相关文章
- 原生js获取Html元素的实际宽度高度
第一种情况就是宽高都写在样式表里,就比如#div1{width:120px;}.这中情况通过#div1.style.width拿不到宽度,而通过#div1.offsetWidth才可以获取到宽度. 第 ...
- [JavaScript] js获取Html元素的实际宽度高度
第一种情况就是宽高都写在样式表里,就比如#div1{width:120px;}.这中情况通 过#div1.style.width拿不到宽度,而通过#div1.offsetWidth才可以获取到宽度. ...
- js获取浏览器body或窗宽度高度合集
<script type="text/javascript"> var s = " "; document.documentElement.scro ...
- js 获取浏览器显示内容的宽度和高度
js获取浏览器显示内容的宽度和高度 CreateTime--2017年7月10日17:24:12Author:Marydon 1.获取浏览器屏幕显示d的网页宽度 /** * 得到浏览器显示的屏幕高 ...
- js获取隐藏元素宽高的方法
网上有一些js获取隐藏元素宽高的方法,但是可能会存在某些情况获取不了. 例如: <!DOCTYPE html> <html lang="en"> <h ...
- JS1 js获取dom元素方法
js获取dom元素方法 1.通过ID选取元素(getElementById) 1)使用方法:document.getElementById("domId") 其 ...
- 使用js获取伪元素的content
在测试过程中有时候会遇到反爬虫机制,一些元素会使用伪元素,这样在定位元素的时候会定位不到,这时候就要使用js来帮助定位,获取到想要的元素 下面是部分代码 //使用js获取伪元素的content Str ...
- 关于Echarts的原生js获取DOM元素与动态加载DOM元素的冲突问题
1.前言: 最近在做的看板项目,因为需要循环加载后台数据,并且用Echarts做数据呈现,所以jQuery和angular等库统统靠边站,Echarts用的是原生js获取DOM元素,至于诸多不兼容等深 ...
- JS获取DOM元素的八种方法
JS获取DOM元素的方法(8种) 通过ID获取(getElementById) 通过name属性(getElementsByName) 通过标签名(getElementsByTagName) 通过类名 ...
随机推荐
- [原创]python之简单计算器(超详解,只有基本功能+-*/,还有括号处理)
不想看过程的话,直接看文章最后的正式源码 作业需求及分析: 流程图 https://www.processon.com/diagraming/580c5276e4b03c844a5a9716 初期感 ...
- MySQL 使用JOIN优化子查询
1.数据准备 mysql> select * from student; +----+--------+----------+---------+-------------+ | id | na ...
- Win10 通过升级安装完成后出现了中文字体忽大忽小的问题解决。
解决方法: 下载Win10的中文语言包.
- 【WPF系列】基础 PasswordBox
参考 How to bind to a PasswordBox in MVVM
- 在Azure上实现Linux Server故障转移
要充分利用公有云的弹性扩展和高可用, 首先要在应用系统层面支持横向扩展(scale out),这个说起来很容易,或者说对新开发的应用系统而言已经成为标配.但是对已有的.老旧的应用系统来说,这就比较困难 ...
- AngularJS笔记---路由视图
最近有同事提到过关于ng-view的使用, 其实自己也不懂了,由于最近一直在做AngularJs的Rearch,所以就看了一些关于ng-view的国外博客. 做过ASP.NET MVC4的都知道, 我 ...
- C#学习笔记-图像处理篇(一)绘制公章
上个月免费帮别人做事,就一直在服务员和程序员中来回切换,所以好多事情都弄得乱糟糟的,家里也是乱七八糟的,所以学习这一块也放了一段时间. 刚刚开始当服务员的时间看到了形形色色的人,觉得很好玩,他们每个人 ...
- 团队项目——编写项目的Spec
团队项目--编写项目的Spec 一.Spec的目标 spec主要用来说明软件的外部功能,和用户的交互情况,主要用来说明软件内部的设计.图片编辑器是与生活息息相关的一个必备软件,随的流行, ...
- 错题分析--ASP.NET
解析:支架模板支持的类型包括Empty.Create.Delete.Details.Edit.List 解析:Spring支持4种依赖检查:默认的是none.因此说法不正确的结果是D 解析:各层之间不 ...
- httpUrlConnection中文乱码
public void getFeiInfo(String sessionId) throws IOException{ //发送的请求参数,发送的格式也是Json的 String requestSt ...