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(getStyle(box,"width"));