教你如何通过JavaScript读取元素的样式
更新时间：2022年01月21日 10:02:10 作者：哪 吒
这篇文章主要给大家介绍了关于如何通过JavaScript读取元素的样式,文中通过实例代码以及图文介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
一、getComputedStyle()
1、getComputedStyle()是window的方法，可以获取元素当前的样式
Window.getComputedStyle()方法返回一个对象，该对象在应用活动样式表并解析这些值可能包含的任何基本计算后报告元素的所有CSS属性的值。 私有的CSS属性值可以通过对象提供的API或通过简单地使用CSS属性名称进行索引来访问。
let style = window.getComputedStyle(element, [pseudoElt]);
2、两个参数
要获取样式的元素
可以传递一个伪元素，一般都传null
该方法会返回一个对象，对象中封装了当前元素对应的样式，可以通过对象样式名来读取样式，如果获取的样式没有设置，则会获取到真实的值，而不是默认值。
3、代码实例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box1{
width: 120px;
height: 120px;
background-color: red;
}
</style>
<script type="text/javascript">
window.onload = function(){
//点击按钮以后读取box1的样式
var box1 = document.getElementById("box1");
var btn01 = document.getElementById("btn01");
btn01.onclick = function(){
var obj = getComputedStyle(box1,null);
alert(getComputedStyle(box1,null).width);
};
};
</script>
</head>
<body>
<button id="btn01">戳我一下</button>
<br /><br />
<div id="box1" ></div>
</body>
</html>4、浏览器效果
备注：IE无效
二、定义一个方法获取元素信息
1、代码实例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box1{
width: 120px;
height: 120px;
background-color: red;
}
</style>
<script type="text/javascript">
window.onload = function(){
//点击按钮以后读取box1的样式
var box1 = document.getElementById("box1");
var btn01 = document.getElementById("btn01");
btn01.onclick = function(){
// 定义一个函数，用来获取指定元素的当前的样式
var ret = getBoxStyle(box1,"width");
alert(ret);
};
};
/*
* 参数：
* obj 要获取样式的元素
* name 要获取的样式名
*/
function getBoxStyle(obj , name){
if(window.getComputedStyle){
//谷歌/edge浏览器，具有getComputedStyle()方法
return getComputedStyle(obj , null)[name];
}else{
//IE没有getComputedStyle()方法，下面为IE8的方式
return obj.currentStyle[name];
}
}
</script>
</head>
<body>
<button id="btn01">戳我一下</button>
<br /><br />
<div id="box1" ></div>
</body>
</html>2、浏览器显示
三、clientWidth和clientHeight
1、这两个元素是获取元素的宽度和高度，不带px
2、这两个元素是只读的，不可修改
3、代码实例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box1{
width: 120px;
height: 150px;
background-color: red;
}
</style>
<script type="text/javascript">
window.onload = function(){
var box1 = document.getElementById("box1");
var btn01 = document.getElementById("btn01");
btn01.onclick = function(){
alert(box1.clientWidth);
alert(box1.clientHeight);
};
};
</script>
</head>
<body id="body">
<button id="btn01">亲我一下</button>
<div id="box1"></div>
</body>
</html>4、浏览器展示
四、offsetWidth和offsetHeight
1、获取元素的整个的宽度和高度，包括内容区、内边距和边框
2、代码实例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box1{
width: 100px;
height: 100px;
background-color: red;
padding: 10px;
border: 10px solid yellow;
}
</style>
<script type="text/javascript">
window.onload = function(){
var box1 = document.getElementById("box1");
var btn01 = document.getElementById("btn01");
btn01.onclick = function(){
/*
* offsetWidth
* offsetHeight
* - 获取元素的整个的宽度和高度，包括内容区、内边距和边框
*/
alert(box1.offsetWidth);
};
};
</script>
</head>
<body id="body">
<button id="btn01">亲我一下</button>
<br /><br />
<div id="box1"></div>
</body>
</html>3、浏览器展示
五、offsetParent
1、获取当前元素的父元素
2、代码实例
var op = box1.offsetParent; alert(op.id);
3、浏览器展示
六、offsetLeft和offsetTop
1、offsetLeft
当前元素相对于其定位父元素的水平偏移量
2、offsetTop
当前元素相对于其定位父元素的垂直偏移量
七、scrollWidth和scrollHeight
1、scrollWidth
可以获取元素整个滚动区域的宽度
2、scrollHeight
可以获取元素整个滚动区域的高度
八、scrollLeft和scrollTop
1、scrollLeft
获取水平滚动条滚动的距离
2、scrollTop
获取垂直滚动条滚动的距离
当满足scrollHeight - scrollTop == clientHeight，说明垂直滚动条滚动到底了。
当满足scrollWidth - scrollLeft == clientWidth，说明水平滚动条滚动到底了。
九、 事件的冒泡
1、 事件的冒泡指的是事件的向上传递，当后代元素的事件被触发时，其父元素的相同事件也会被触发。
2、可以通过设置，取消事件的冒泡
3、代码实例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#nz{
width: 200px;
height: 100px;
background-color: rgb(205, 112, 50);
}
#yy{
background-color: yellow;
}
</style>
<script type="text/javascript">
window.onload = function(){
//为云韵绑定一个单击响应函数
var yy = document.getElementById("yy");
yy.onclick = function(event){
event = event || window.event;
alert("我是云韵");
//取消冒泡
//可以将事件对象的cancelBubble设置为true，即可取消冒泡
//event.cancelBubble = true;
};
//为哪吒绑定一个单击响应函数
var nz = document.getElementById("nz");
nz.onclick = function(event){
event = event || window.event;
alert("我是哪吒");
event.cancelBubble = true;
};
//为body绑定一个单击响应函数
document.body.onclick = function(){
alert("我是body的单击响应函数");
};
};
</script>
</head>
<body>
<div id="nz">
我是哪吒
<span id="yy">我是云韵</span>
</div>
</body>
</html>4、浏览器展示
总结
到此这篇关于JavaScript读取元素的样式的文章就介绍到这了,更多相关JavaScript读取元素的样式内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章为大家总结了一些JavaScript中常用的数组操作方法，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-07-07
单击复制文字的js找了很久，由于之前没有接触过，完全不知道兼容ie及标准dom浏览器，不仅仅要通过js，而且需要flash的帮忙，下面与大家分享下具体的实现方法2013-07-07
对付乱码我都是用过滤器做字符编码过滤的，Get方法过滤器监听不到，所以我一直喜欢使用Post方法，下面对Ajax Get和Post方法做一对比,需要了解的朋友可以 参考下2012-12-12
本文给大家分享一段使用的js代码实现鼠标移入显示图片或微信二维码样式，代码简单易懂，非常不错，需要的朋友参考下吧2016-12-12
这篇文章主要介绍了微信小程序学习笔记之文件上传、下载操作,结合实例形式分析了微信小程序图片文件传输的原理、步骤及后台php操作相关实现技巧,并结合图文形式予以详细说明,需要的朋友可以参考下2019-03-03![file-loader打包图片文件时路径错误输出为[object-module]的解决方法](//img.jbzj.com/images/xgimg/bcimg5.png)
file-loader打包图片文件时路径错误输出为[object-module]的解决方法
这篇文章主要介绍了file-loader打包图片文件时路径错误输出为[object-module]的解决方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-01-01
这篇文章主要介绍了微信小程序与h5的相互跳转场景分析,在微信小程序内编写webview文件,通过webview去跳转h5,loadUrl为h5的地址,非嵌套,h5需要跳转打开某个微信小程序,需要的朋友可以参考下2023-10-10
这篇文章主要介绍了javascript与jquery动态创建html元素的方法,结合实例形式分析了javascript与jQuery动态创建页面元素的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下2016-07-07
javascript基于原型链的继承及call和apply函数用法分析
这篇文章主要介绍了javascript基于原型链的继承及call和apply函数用法,结合实例形式较为详细的分析了javascript中继承的概念、创建方法以及call和apply函数的功能与使用技巧,需要的朋友可以参考下2016-12-12
这篇文章主要介绍了js获取域名的方法,涉及window.location中常见方法的使用技巧,需要的朋友可以参考下2015-01-01
![file-loader打包图片文件时路径错误输出为[object-module]的解决方法](http://img.jbzj.com/images/xgimg/bcimg5.png)
最新评论