教你如何通过JavaScript读取元素的样式

Aggie ·

更新时间:2024-09-20

· 1743 次阅读

一、getComputedStyle()

1、getComputedStyle()是window的方法，可以获取元素当前的样式

2、两个参数

3、代码实例

4、浏览器效果

二、定义一个方法获取元素信息

1、代码实例

2、浏览器显示

三、clientWidth和clientHeight

1、这两个元素是获取元素的宽度和高度，不带px

2、这两个元素是只读的，不可修改

3、代码实例

4、浏览器展示

四、offsetWidth和offsetHeight

1、获取元素的整个的宽度和高度，包括内容区、内边距和边框

2、代码实例

3、浏览器展示

五、offsetParent

1、获取当前元素的父元素

2、代码实例

3、浏览器展示

六、offsetLeft和offsetTop

1、offsetLeft

2、offsetTop

七、scrollWidth和scrollHeight

1、scrollWidth

2、scrollHeight

八、scrollLeft和scrollTop

1、scrollLeft

2、scrollTop

九、事件的冒泡

1、事件的冒泡指的是事件的向上传递，当后代元素的事件被触发时，其父元素的相同事件也会被触发。

2、可以通过设置，取消事件的冒泡

3、代码实例

4、浏览器展示

总结

一、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、浏览器展示