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 盒模型 ...
随机推荐
- [c++] 计算太阳高度角
/* 输入参数: Longitude - 经度(单位"度") Latitude - 纬度(单位"度") Year - 年 Month - 月 Day - 日 H ...
- 1. centos7 的安装
选择上海时间 我们选择桌面版 选择手动配置分区 选择标准分区 修改主机名 开始安装 设置密码 设置用户名 接下来等待安装完 同样的操作再安装3台机器!!这里不多赘述. 安装完之后就重启 接下来给不同机 ...
- 【转贴】Debian 10 "buster" 正式发布
Debian 10 "buster" 正式发布 https://news.cnblogs.com/n/627909/ 我看到龙芯的 就是 mips64el 的指令集.. Linux ...
- Java 错误：Constructor call must be the first statement in a constructor
今天用学校里的黑马程序员通Java语法 想到了:在有参构造函数中调用无参构造函数 语法是这样的: class Person{ private int age; public Person() { Sy ...
- 简单搭建http服务器-HttpListener使用
使用HTTPListener可以简单搭建一个Http服务器,对于本地使用很是方面,想起之前使用了WebSocket来与本地网页通讯的例子,也是可以改为使用HTTPListener来做的.看下HTTPL ...
- C# 下sqlite简单使用
1. 对数据库增, 删, 改 //数据库文件存储路径,(Environment.CurrentDirectory:为当前工作目录的完全路径) string dbPath = "Data So ...
- Git复习（十三）之git revert用法及与git reset区别
git revert用法以及与git reset的区别 git revert用法 git revert 撤销 某次操作,此次操作之前和之后的commit和history都会保留,并且把这次撤销 作为一 ...
- linux复习6
ubuntu------------- apt //advanced package tool,高级包工具. apt-get install centos------------- yum //yel ...
- 10 Scrapy框架持久化存储
一.基于终端指令的持久化存储 保证parse方法中有可迭代类型对象(通常为列表or字典)的返回,该返回值可以通过终端指令的形式写入指定格式的文件中进行持久化操作. 执行输出指定格式进行存储:将爬取到的 ...
- win7(64位旗舰版)visual studio 2017无法安装及vs2015闪退问题解决方式
折腾了两天,几乎试了网上说的所有方法(就差重装系统了,看到有人说重装系统之后还是同样的问题,果断放弃重装),visual studio 2017的安装问题终于解决了,为了帮助同样还在折腾的初级开发者们 ...