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 盒模型 ...
随机推荐
- MSF魔鬼训练营-3.2.1活跃主机扫描
概要: msf的arp_sweep .udp_sweep模块 Nmap -sn使用ping探测 -PU -sn 使用UDP协议端口探测 msf模块 arp_sweep 常用 ipv6_mult ...
- 双元素非递增（容斥）--Number Of Permutations Educational Codeforces Round 71 (Rated for Div. 2)
题意:https://codeforc.es/contest/1207/problem/D n个元素,每个元素有a.b两个属性,问你n个元素的a序列和b序列有多少种排序方法使他们不同时非递减(不同时g ...
- Thinkphp5.0快速入门笔记（3）
学习来源与说明 https://www.kancloud.cn/thinkphp/thinkphp5_quickstart 测试与部署均在windows10下进行学习. 快速入门第三节 获取当前的请求 ...
- Docker：Swarm + Stack 一站式部署容器集群
参考1 参考2 1.注意docker的版本,yum默认安装的版本比较低,可能出现 unsupported Compose file version: 3.7 docker版本升级 2.docker-c ...
- WPF ListView多行显示
//前台 <ListView Margin="14,152,12,74" Name="lvList" SelectionMode="Multip ...
- |、&、||、&&、^符号含义
|和&为计算机中二进制之间的位运算 在计算机中二进制的0表示false,1表示true. |为位运算中的或运算:它的运算逻辑为一真则真,全假则假 &为位运算中的并运算:它的运算逻辑为一 ...
- Dubbo从入门到实战视频教程
Dubbo是阿里巴巴公司开源的一个高性能优秀的服务框架,使得应用可通过高性能的 RPC 实现服务的输出和输入功能,可以和 Spring框架无缝集成.这里整理了一套关于dubbo的视频教程分享给大家,包 ...
- Eclipse集成spring-tool-suite（STS）
1.官方下载 sts是spring官方在eclipse基础上加了很多插件之后封装的开发工具.sts与eclipse完全一样,但是多了很多插件,比如maven,使用起来更加方便.如果使用eclipse自 ...
- hdfs 配置文件详解
– dfs.name.dir – NameNode 元数据存放位置 – 默认值:使用core-site.xml中的hadoop.tmp.dir/dfs/name – dfs.block.size – ...
- xml_dom4j
1.用dom4j解析文件 package Xml3; import java.io.File; import java.util.Iterator; import org.dom4j.Attribut ...