js获取高度和宽度

摘要:
Marydonjs获取高度和宽度参考连接:通过文档获取id='div1'的宽度和高度。获取元素ById('div1')。风格高度/宽度,并且必须使用文档。获取元素ById('div1')。offsetHeight/offsetWidth。第二种情况是高度:100px;
 

CreateTime--2017年7月24日10:15:47
Author:Marydon

js获取高度和宽度

参考连接:http://www.cnblogs.com/EasonJim/p/6229517.html

实现方式:

    style.height----offsetHeight,style.width----offsetWidth

第一种情况:

  宽高都写在样式表里,就比如 #div1{120px;height:100px;}。

  获取id=‘div1’的宽和高,如何实现?

  通过document.getElementById('div1').style.height/width,返回值为空,即获取不到宽和高;

  必须通过document.getElementById('div1').offsetHeight/offsetWidth  

第二种情况:

  宽和高写在行内,如style="120px;height:100px;" 

  上述2个方法都能获取到宽度和高度

两者的区别:

  a.通过style.attr的方式取值有限制条件:即要获取的属性必须在行内样式中声明;而id.offsetWidth和id.offsetHeight无视样式写在样式表还是行内,都能获取到元素的宽和高;

  b.offsetWidth/offsetHeight=容器宽度+两侧边框宽度,返回值是数值;而style.attr返回的就是div的宽度,返回值是数值+"px"。

 

免责声明:文章转载自《js获取高度和宽度》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇Interceptors关于Unity中的摄像机下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

CSS中关于多个class样式设置的不同写法

html中:  <div class="containerA"> 这是AAAAAAAAAAAAAAAAAAAAAAA样式 <div class="containerB"> 这是BBBBBBBBBBBBBBBBBBBBBB样式 </div> </div>  css中: .containerA .containe...

iOS 和 Android 中的Alert

iOS 和 Android中都有alert这种提示框,下面简单介绍下。 ios中的alert叫做UIAlertView,共有4种样式,由于在ios7上,自定义alertview不太好用,所以也就这4种样式。 typedef enum { UIAlertViewStyleDefault = 0, //不带输入框 UIAlertViewSt...

关于html中table表格tr,td的高度和宽度-转载

关于html中table表格tr,td的高度和宽度 关于html中table表格tr,td的高度和宽度 做网页的时候经常会遇到各种各样的问题,经常遇到的一个就是会碰到表格宽度对不齐的问题。首先,来分析一下这三个标签中height和width的区别:  1、table中的width和height设置及其作用: table中设置的height其实是设置一个最...

JS-DOM样式操作

js样式操作 行内式样式操作 //行内式属性的获取 let value = 元素对象.style.属性名; //得到的值为String类型,如果要做算术运算需要转型 //仅能得到行内式属性的值,对于嵌入式、外联式的值无法获取 //属性名需要注意如果在css中唯一个单词则是原单词,如果在css中为多个单词则遵守驼峰命名法...

iOS13适配/黑暗模式的适配/KVC访问私有属性/模态弹窗ViewController 默认样式改变 /LaunchImage即将废弃/蓝牙的权限申请/推送Device Token适配/UIKit 控件变化/StatusBar新增样式

目录 1. KVC访问私有属性 2. 模态弹窗ViewController 默认样式改变 3. 黑暗模式的适配 4. LaunchImage即将废弃 5. 新增一直使用蓝牙的权限申请 6. Sign With Apple 7. 推送Device Token适配 8. UIKit 控件变化 9. StatusBar新增样式 1. KVC访问私有属性  这...

svg 不同比例缩放后 拖拽事件的鼠标位置转换为svg图纸中的位置

说起来可能有点绕,下面尽可能的把我想表达的表述清楚吧 来看下下面这张图 svg元素的宽度和浏览器的宽度是不一样的,事实上,还有一个宽度,那就是svg画布的宽度 为什么会有这么多不一样的宽度呢,直接浏览器的宽高就是svg标签的宽高,同时也设置同样的画布宽高,不就不用转换拖拽事件鼠标的坐标位置了吗? 是这么个道理,一开始我也是这么干的,可是后来发现,不同客户...