原生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; //宽度
本文转自:http://www.cnblogs.com/zhwl/p/3858682.html
原生js获取Html元素的实际宽度高度的更多相关文章
- js获取Html元素的实际宽度高度
第一种情况就是宽高都写在样式表里,就比如#div1{width:120px;}.这中情况通过#div1.style.width拿不到宽度,而通过#div1.offsetWidth才可以获取到宽度. 第 ...
- [JavaScript] js获取Html元素的实际宽度高度
第一种情况就是宽高都写在样式表里,就比如#div1{width:120px;}.这中情况通 过#div1.style.width拿不到宽度,而通过#div1.offsetWidth才可以获取到宽度. ...
- 关于Echarts的原生js获取DOM元素与动态加载DOM元素的冲突问题
1.前言: 最近在做的看板项目,因为需要循环加载后台数据,并且用Echarts做数据呈现,所以jQuery和angular等库统统靠边站,Echarts用的是原生js获取DOM元素,至于诸多不兼容等深 ...
- 原生js获取子元素
感谢原文作者:归一山人 原文链接:https://www.cnblogs.com/guiyishanren/p/12214757.html 获取子元素的方法有 //获取第一个demo类 dom = d ...
- 原生js获取子元素、给元素增加div
//鼠标移入移出动画 解决页面闪屏问题 window.onload = function () { var el = document.createElement('div'); el.classNa ...
- js获取浏览器body或窗宽度高度合集
<script type="text/javascript"> var s = " "; document.documentElement.scro ...
- JS获取DOM元素的八种方法
JS获取DOM元素的方法(8种) 通过ID获取(getElementById) 通过name属性(getElementsByName) 通过标签名(getElementsByTagName) 通过类名 ...
- 原生JS获取元素宽高实践详解
开篇的话 任何不是亲身实践中求得的知识,都不是属于你的.任何求得的知识不去时常温习运用,也不是属于你的. 记录由来 在做个上拉广告功能中遇到了一个"理所当然"觉得对的用法,慢慢才排 ...
- 原生js获取元素的样式信息
工作中经常会需要获取DOM元素的样式,之前都是通过jquery的css()方法,现在总结一下通过原生js获取元素样式的方法. obj.style js var _width = obj.style.w ...
随机推荐
- C++ find 函数用法
头文件 #include <algorithm> 函数实现 template<class InputIterator, class T> InputIterator find ...
- 【转】备份Kylin的元数据
http://blog.csdn.net/jiangshouzhuang/article/details/51290239 Kylin组织它所有的元数据(包括cube descriptions and ...
- JQuery解析json数据
<script> var data ="{" + "root:[" + "{name:'1',value:'0'}," + &q ...
- Android 编程下 ListView 的 HeaderView 和 FooterView 不可选择点击
在 ListView 里,HeaderView 和 FooterView 也占一行,与其他的 item 一样,可以点击,有索引,HeaderView 的索引为0.如果要使这两项不可点击,可以使用下面的 ...
- Codeforces Round #354 (Div. 2)-B
B. Pyramid of Glasses 题目链接:http://codeforces.com/contest/676/problem/B Mary has just graduated from ...
- 为什么使用BeagleBoneBeagleBone的优点
为什么使用BeagleBone BeagleBone的优点 当前,一个典型的基于微控制器板的售价在120元左右,而BeagleBone Black的售价在330元左右.除了更强大的处理器之外,你额外的 ...
- Java命令行输入求和的简单学习
思想:命令行输入的参数,必须先转换为数字才能进行加法计算,这就需要引用java.util.Scanner; 流程框图: 源代码: //实现几个整数相加的程序 //高开拓,2015.9.26 packa ...
- item上下自动循环滚动显示
//li 上下滚动 (function($){ $.fn.extend({ Scroll:function(opt,callback){ //参数初始化 if(!opt) var opt={}; va ...
- 10324 Global Warming dfs + 二分
时间限制:1000MS 内存限制:65535K提交次数:0 通过次数:0 题型: 编程题 语言: G++;GCC Description Global warming is a big prob ...
- 《HBase实战》
对,我正在研读这本书,今天开始,我希望我看完后能有收获和大家分享,这个日志作为开始,勉励自己! 对,我应该静下心,做一些我更喜欢的事情,不能在自我陶醉中迷失! 断断续的看,到今天大概把这本书看完了,没 ...