JS基础-获取当前元素的样式&&其他样式相关的属性

最新推荐文章于 2022-04-17 14:24:14 发布

原创

最新推荐文章于 2022-04-17 14:24:14 发布 · 968 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#JS基础

本文介绍了JavaScript中获取元素样式的多种方法，包括currentStyle、getComputedStyle以及自定义的getStyle()函数。同时，还讨论了如clientWidth/clientHeight、offsetWidth/offsetHeight等属性，以及offsetParent、offsetLeft/offsetTop、scrollWidth/scrollHeight、scrollLeft/scrollTop在处理元素尺寸和位置时的应用。最后，提供了一个垂直滚动条滚动到底的实例。

1.利用currentStyle方法来获取当前元素的样式

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>获取元素当前样式练习</title>
<style type="text/css">
#box1
{
	width:100px;
	height:100px;
	background-color:#F00;
}
</style>
<script>
window.function()
{
	//获取box1样式
	var box=document.getElementById("box1");
	//获取btn样式
	var btn=document.getElementById("btn1");
	//单击响应事件
	btn.onclick=function()
	{
		//读取当前样式
		//语法 元素.currentStyle.样式名,它可以用来读取当前显示的样式如果但前样式没有设置样式，则获取它的默认值
		//currentStyle只有IE浏览器支持，其他浏览器都不支持
		alert(box.currentStyle.width);
		</script>
</head>
<body>
<button id="btn1">点击一下</button>
<br/><br/><br/>
<div id="box1"></div>
</body>
</html>

2.利用getComputedStyle()方法来获取当前元素的样式
说明： currentStyle和getComputedStyle这两个方法只能读不能修改，如果要修改必须通过style属性

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>获取元素当前样式练习</title>
<style type="text/css">
#box1
{
	width:100px;
	height:100px;
	background-color:#F00;
}
</style>
<script>
window.function()
{
	//获取box1样式
	var box=document.getElementById("box1");
	//获取btn样式
	var btn=document.getElementById("btn1");
	//单击响应事件
	btn.onclick=function()
	{
		//在其他浏览器中可以使用getComputedStyle()这个方法来获取当前的样式，这个方法是window方法可以直接使用需要有两个参数第一个，需获取样式的元素。第二个，可以传递一个伪元素，一般都是null
		var obj=getComputedStyle(box,null);
		alert(obj.backgroundColor);
		//该方法会返回一个对象，对象中封装了当前元素对应的样式可以通过，对象.样式名来获取当前样式
		//如果获取到的样式没有设置，则会获取到真实值而不是默认值（此点与currentStyle不同）例，没有设置width的值，则会返回一个值而不是auto
		//该方法不支持IE8及以下浏览器
		};
	};
</script>
</head>
<body>
<button id="btn1">点击一下</button>
<br/><br/><br/>
<div id="box1"></div>
</body>
</html>

3.自定义getStyle()方法来获取当前元素的样式

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>获取元素当前样式练习</title>
<style type="text/css">
#box1
{
	width:100px;
	height:100px;
	background-color:#F00;
}
</style>
<script>
window.function()
{
	//获取box1样式
	var box=document.getElementById("box1");
	//获取btn样式
	var btn=document.getElementById("btn1");
	//单击响应事件
	btn.onclick=function()
	{
	  alert(getSty