JS如何设置和获取盒模型对应的宽和高
㈠方式一：通过DOM节点的 style 样式获取
dom.style.width/height 只能获取使用内联样式的元素的宽和高。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>>js获取盒模型宽和高的方法</title>
<style>
*{
margin: 0;
padding: 0;
}
#div1{
width: 100px;
height: 100px;
padding: 10px;
border:10px solid #000000;
background: #ffff00;
}
#div2{
width: 100px;
height: 100px;
padding: 10px;
border:10px solid #0000ff;
background: #ff0000;
box-sizing: border-box; }
</style>
</head>
<body>
<p>dom.style.width/height;</p>
<div id="div1" style="width: 100px">哟哟哟</div>
<div id="div2">嘿嘿嘿</div>
<script>
var oDiv1 = document.getElementById("div1");
console.log(oDiv1.style.width ) ;
</script>
</body>
</html>
效果图：
js获取的高度和宽度的结果如下：
缺点：通过这种方式，只能获取行内样式，不能获取内嵌的样式和外链的样式。
㈡方式二（通用型）
⑴window.getComputedStyle(dom).width/height
⑵这种方法获取的是浏览器渲染以后的元素的宽和高，这种写法兼容性更好一些。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>>js获取盒模型宽和高的方法</title>
<style>
*{
margin: 0;
padding: 0;
}
#div1{
width: 100px;
height: 100px;
padding: 10px;
border:10px solid #000000;
background: #ffff00;
}
#div2{
width: 100px;
height: 100px;
padding: 10px;
border:10px solid #0000ff;
background: #ff0000;
box-sizing: border-box; }
</style>
</head>
<body>
<p>window.getComputedStyle(element).width/height;</p>
<div id="div1" >111</div>
<div id="div2">222</div>
<script>
var oDiv1 = document.getElementById("div1");
console.log( window.getComputedStyle(oDiv1).width ) ;
</script> </body>
</html>
效果图：
js获取的高度和宽度的结果如下：
㈢方式三（IE独有的）
⑴dom.currentStyle.width/height
⑵这种方法获取的是浏览器渲染以后的元素的宽和高，无论是用何种方式引入的css样式都可以，但只有IE浏览器支持这种写法。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>>js获取盒模型宽和高的方法</title>
<style>
*{
margin: 0;
padding: 0;
}
#div1{
width: 100px;
height: 100px;
padding: 10px;
border:10px solid #000000;
background: #ffff00;
}
#div2{
width: 100px;
height: 100px;
padding: 10px;
border:10px solid #0000ff;
background: #ff0000;
box-sizing: border-box; }
</style>
</head>
<body>
<p>dom.currentStyle.width/height;</p>
<div id="div1" >哟哟哟</div>
<div id="div2">呵呵呵</div>
<script>
var oDiv1 = document.getElementById("div1");
console.log(oDiv1.currentStyle.width);
</script> </body>
</html>
效果图：
js获取的高度和宽度的结果如下：
㈣方式四
⑴dom.getBoundingClientRect().width/height
⑵这种方式获得到的宽度是内容content+padding+border
⑶此 api 的作用是：获取一个元素的绝对位置。绝对位置是视窗 viewport 左上角的绝对位置。
⑷此 api 可以拿到四个属性：left、top、width、height。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>>js获取盒模型宽和高的方法</title>
<style>
*{
margin: 0;
padding: 0;
}
#div1{
width: 100px;
height: 100px;
padding: 10px;
border:10px solid #000000;
background: #ffff00;
}
#div2{
width: 100px;
height: 100px;
padding: 10px;
border:10px solid #0000ff;
background: #ff0000;
box-sizing: border-box; }
</style>
</head>
<body>
<p>dom.getBoundingClientRect().width/height;</p>
<div id="div1" >111</div>
<div id="div2">222</div>
<script>
var oDiv1 = document.getElementById("div1");
console.log(oDiv1.getBoundingClientRect().width);
</script> </body>
</html>
效果图：
js获取的高度和宽度的结果如下：
JS如何设置和获取盒模型对应的宽和高的更多相关文章
- 使用js如何设置、获取盒模型的宽和高
第一种: dom.style.width/height 这种方法只能获取使用内联样式的元素的宽和高. 第二种: dom.currentStyle.width/height 这种方法获取的是浏览器渲染以 ...
- JS设置和获取盒模型的宽和高
JS设置和获取盒模型的宽和高 dom.style.width/height:只能取出内联样式的宽度和高度 dom.currentStyle.width/height:获取即时的计算的样式,但是只有IE ...
- JS获取盒模型对应的宽高
## 获取内联样式宽高 只能获取内联设置的样式,在style或者.css文件中设置的无法获取 let div = document.querySelect('.test'); let width = ...
- js ajax设置和获取自定义header信息的方法总结
目录 1.js ajax 设置自定义header 1.1 方法一: 1.2 方法二: 2.js ajax 获取请求返回的response的header信息 3.js ajax 跨域请求的情况下获取自定 ...
- Android初级教程_获取Android控件的宽和高
转载:http://blog.csdn.net/johnny901114/article/details/7839512 我们都知道在onCreate()里面获取控件的高度是0,这是为什么呢?我们来看 ...
- 我的Android进阶之旅------>如何获取Android控件的宽和高
本文转载于:http://blog.csdn.net/johnny901114/article/details/7839512 我们都知道在onCreate()里面获取控件的高度是0,这是为什么呢?我 ...
- 【转】获取Android控件的宽和高
我们都知道在onCreate()里面获取控件的高度是0,这是为什么呢?我们来看一下示例: 首先我们自己写一个控件,这个控件非常简单: public class MyImageView extends ...
- Java 获取图片的大小、宽、高
参考:https://www.cnblogs.com/hongten/archive/2012/11/26/hongten_java_ImageReader_BufferedImage.html im ...
- CSS盒模型的深度思考及BFC
本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. 题目:谈一谈你对CSS盒模型的认识 专业的面试,一定会问 CSS 盒模型 ...
随机推荐
- SpringSecurity 配置
SpringSecurity+JWT https://www.jianshu.com/p/5b9f1f4de88d https://blog.csdn.net/qq_35494808/article/ ...
- [转帖]RPM的原理及rpm命令常用参数
RPM的原理及rpm命令常用参数 2015年09月14日 15:39:43 lose_wait 阅读数 1298 https://blog.csdn.net/u012012939/article/de ...
- java crc32
原文链接:http://blog.csdn.net/tbkken/article/details/8210952 在优化关系数据库的关联查询的时候,ON的字段选择为数值型,必须是会比字符型的数据快 ...
- .Net Core使用AutoMapper做对象关系映射
我想很多后端开发者,纠结于如何在Dto及表实体中做属性关系映射,因为真的太繁琐了., ⒈如何使用? Mapper.Initialize(cfg => cfg.CreateMap<Users ...
- 面试35-删除字符串重复字符-删除出现在第二个字符串中的字符-第一个只出现一次的字符-hash表计数
#include<iostream>#include<algorithm>#include<functional>using namespace std;char ...
- Smarty内置函数之config_load
config_load的作用是: 用于从配置文件中加载变量,属性file引入配置文件名,另外若配置文件包含多个部分,可以使用属性section指定从那部分取得变量(若不指定,将会引入失败). 实例: ...
- Eureka注册中心
Eureka简介 Eureka是Netflix开发的服务发现框架,本身是一个基于REST的服务,主要用于定位运行在AWS域中的中间层服务,以达到负载均衡和中间层服务故障转移的目的.SpringClou ...
- 宿主机-免密登录Docker容器
CentOS7 安装Docker 讨论QQ:1586558083 目录 一.检查系统内核 二.安装Docker 2.1 安装 2.2 查看docker版本 2.3 启动docker 三.建立docke ...
- DockerFile 编译语法详解
Dockerfile是一个文本格式的配置文件,用户可以使用Dockerfile来快速创建自定义的镜像,本小结首先介绍Dockerfile典型的基本结构和它支持的众多指令,并具体讲解通过这些指令来编写定 ...
- python基础之内置函数和匿名函数
内置函数 学习函数以后多了很多概念,例如函数的命名空间,函数的作用域,函数的调用等等,函数的作用就是为了实现某些功能而方便以后可以调用,内置函数就是这样的一些公共的函数,被称为内置函数. 我们就一 ...