JS设置和获取盒模型的宽和高

dom.style.width/height:只能取出内联样式的宽度和高度

dom.currentStyle.width/height:获取即时的计算的样式,但是只有IE支持

window.getComputedStyle(dom).width:获取即时计算的样式,支持其他浏览器,兼容性更好

dom.getBoundingClientRect( ).width/height:计算盒模型在页面中的绝对位置,比较少用。

dom.offsetWidth/offectHeight:返回元素实际大小


一、dom.style.width/height

这种方式只能取到dom元素内联样式所设置的宽高,也就是说如果该节点的样式是在style标签中或是外部的CSS样式表中的话,通过这种方法是没办法获取dom的宽高的。

实例:

在这个例子中给box1使用<style>设置样式,给box2使用内联样式设置宽高。

所以在使用   console.log(document.getElementById(" ").style.width/height)  只能返回box2的宽度和高度。

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>获取盒子宽高</title>
<style>
#box1{
color: white;
font-size:50px;
text-align: center;
line-height:185px;
width:300px;height:185px;
background: plum;
margin:99px auto;
}
</style>
</head>
<body>
<div id="box1">盒子一</div>
<div id="box2" style="width:300px;
height:185px;
background:pink;
color: white;
font-size:50px;
text-align: center;
line-height:185px;
margin: auto;">盒子二</div>
</body>
</html>

控制台输出效果:

只可以获取box2的宽高width:300px;height:185px;


二、dom.currentStyle.width/height

这种方式获取的是在页面渲染完成后的结果,意味着无论以哪种方式,内联也好,style标签中也好,都可以获取的到。但是这种方法只能在IE浏览器中使用。

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>获取盒子宽高</title>
<style>
#box1{
color: white;
font-size:50px;
text-align: center;
line-height:185px;
width:300px;height:185px;
background: plum;
margin:99px auto;
}
</style>
</head>
<body>
<div id="box1">盒子一</div>
<div id="box2" style="width:300px;
height:185px;
background:pink;
color: white;
font-size:50px;
text-align: center;
line-height:185px;
margin: auto;">盒子二</div>
</body>
</html>

 IE控制台输出:


三、window.getComputedStyle(dom).width/height

    这种方式的原理和方式二是一样的,都可以在任何方式在获取页面在完成渲染之后的结果。相比dom.currentStyle.width/height方式而言,这种方式可以兼容更多的浏览器,不仅仅是IE浏览器。

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>获取盒子宽高</title>
<style>
#box1{
color: white;
font-size:50px;
text-align: center;
line-height:185px;
width:300px;height:185px;
background: plum;
margin:99px auto;
}
</style>
</head>
<body>
<div id="box1">盒子一</div>
<div id="box2" style="width:300px;
height:185px;
background:pink;
color: white;
font-size:50px;
text-align: center;
line-height:185px;
margin: auto;">盒子二</div>
</body>
</html>

firefox浏览器中的效果:

Chrome浏览器中的效果:

IE七八不支持:


四、dom.getBoundingClientRect( ).width/height

   这个方法可以获得运行后的属性。一般用于计算一个元素的绝对定位。返回一个矩形对象,包含四个属性:left、top、right和bottom。分别表示元素各边与页面上边和左边的距离。

  • console.log(box.getBoundingClientRect().top);       // 元素上边距离页面上边的距离

  • console.log(box.getBoundingClientRect().right);     // 元素右边距离页面左边的距离

  • console.log(box.getBoundingClientRect().bottom);  // 元素下边距离页面上边的距离

  • console.log(box.getBoundingClientRect().left);        // 元素左边距离页面左边的距离

  • console.log(box.getBoundingClientRect().width);    //元素本身宽度加上边框之后的全部宽度

  • console.log(box.getBoundingClientRect().height);   //元素本身高度加上边框之后的宽度

#box1{
color: white;
font-size:50px;
text-align: center;
line-height:185px;
width:300px;height:185px;
background: plum;
margin:99px auto;
}

  


五、dom.offsetWidth/offectHeight

这组方法可以  返回元素实际大小,包含边框,内边距和滚动条。返回元素大小,默认单位是px。如果没有设置任何CSS宽度和高度,也会在计算后得到宽度和高度。理解offsetWidth和offsetHeight设置的元素实际大小:

  • 设置边框,输出值等于原本大小+边框大小;
  • 设置内边距,输出值等于原本大小+内边距大小;
  • 设置外边距 / 滚动条,输出值无变化等于原本大小;

对于元素大小的获取,一般是块级(block)元素并且以设置了CSS大小的元素较为方便。如果是内联元素(inline)或者没有设置大小的元素就尤为麻烦,所以,建议使用的时候注意。

#box1{
color: white;
font-size:50px;
text-align: center;
line-height:185px;
width:300px;height:185px;
background: plum;
margin:99px auto;
}

控制台输出:

---恢复内容结束---

JS设置和获取盒模型的宽和高的更多相关文章

  1. 使用js如何设置、获取盒模型的宽和高

    第一种: dom.style.width/height 这种方法只能获取使用内联样式的元素的宽和高. 第二种: dom.currentStyle.width/height 这种方法获取的是浏览器渲染以 ...

  2. JS如何设置和获取盒模型对应的宽和高

    ㈠方式一:通过DOM节点的 style 样式获取  dom.style.width/height  只能获取使用内联样式的元素的宽和高. <!DOCTYPE html> <html ...

  3. js设置、获取单值cookie和多值cookie

    js设置.获取单值cookie和多值cookie,代码如下: var CookieUtil = (function () { var Cookie = function () { // 获取单值coo ...

  4. 【Android】获取控件的宽和高

    有时候我们须要在Activity的时候获取控件的宽和高来做一些操作,以下介绍三种获取宽和高的方式: 1. onWindowFocusChanged @Override public void onWi ...

  5. JS获取盒模型对应的宽高

    ## 获取内联样式宽高 只能获取内联设置的样式,在style或者.css文件中设置的无法获取 let div = document.querySelect('.test'); let width = ...

  6. js设置与获取Cookie

    /*设置与获取Cookie*/ var Cookie ={} Cookie.write = function(key, value, duration){ var d = new Date(); d. ...

  7. 获取jsp页面的宽和高

    var winWidth; var winHeight; function getResult() { if(window.innerWidth) { winWidth=window.innerWid ...

  8. POI获取单元格的宽和高

    获取单元格的宽,即获取所在列的宽.先获取单元格所在的sheet:cell.getSheet() sheet.getColumnWidth( cell.getColumnIndex() )  单位不是像 ...

  9. js设置、获取、清除cookie

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...

随机推荐

  1. Android系统开发实务实训

    实训项目 :               Android系统开发实务实训                           项目成品名称:         绝地坦克                 ...

  2. SpringBootSecurity学习(09)网页版登录配置Session共享

    场景 当后台项目由部署在一台改为部署在多台以后,解决session共享问题最常用的办法就是把session存储在redis等缓存中.关于session和cookie概念这里就不再赘述了,在spring ...

  3. Spring 梳理-Spring配置文件 -<context:annotation-config/>和<context:component-scan base-package=""/>和<mvc:annotation-driven /> 的区别

    <context:annotation-config/> 在基于主机方式配置Spring时,Spring配置文件applicationContext.xml,你可能会见<contex ...

  4. Spring框架(三)

    对象依赖关系 Spring中,如何给对象的属性赋值?  [DI, 依赖注入] 1) 通过构造函数 2) 通过set方法给属性注入值 3) p名称空间 4)自动装配(了解) 5) 注解 代码示例: &l ...

  5. Redis 搭建一主二从三哨兵高可用集群

    1.单个redis服务搭建请参考:redis服务搭建 2.在/usr/local下创建目录redis-cluster,并在redis-cluster下创建 6379.6380.6381目录以及data ...

  6. Spring只定义接口自动代理接口实现类

    能够扫描到包 @ComponentScan("org.zxp.esclientrhl") ESCRegistrar类主要实现ImportBeanDefinitionRegistra ...

  7. 教老婆学Linux运维(二)Linux常用命令指南【上】

    目录 教老婆学Linux(二)Linux常用命令指南[上] 一.概述 二.常用命令 教老婆学Linux(二)Linux常用命令指南[上] 作者:姚毛毛的博客 tips:文章太长,分两篇发出,本篇发前三 ...

  8. 关于Python json解析过程遇到的TypeError: expected string or buffer

    关于Python json解析过程遇到的问题:(爬取天气json数据所遇到的问题http://tianqi.2345.com/) part.1 url——http://tianqi.2345.com/ ...

  9. 在Linux系统下有一个目录/usr/share/dict/ 这个目录里包含了一个词典的文本文件,我们可以利用这个文件来辨别单词是否为词典中的单词。

    #!/bin/bash s=`cat /usr/share/dict/linux.words` for i in $s; do if [ $1 = $i ];then echo "$1 在字 ...

  10. Scala 学习笔记之集合(9) 集合常用操作汇总

    object CollectionDemo10 { def main(args: Array[String]): Unit = { var ls = List[Int](1, 2, 3) //向后增加 ...