DOM 修改元素样式属性

回复

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要登录才可以下载或查看，没有帐号？立即注册

x

今天学习修改元素样式属性:

1. 修改元素样式：

1.内联样式:都定义在元素style属性中(在行内)

elem.style--->CSSStyleDeclaration类型的对象

获取或设置元素的内联样式属性:

elem.style.属性名

属性名:将css属性名去横线,变驼峰

问题：

获取，只能获得内联样式中的属性,无法获得样式表中级联或继承来的外部属性。

修改样式：放在内联样式中的属性,优先级最高!覆盖所有外部的!

何时使用style：修改一个元素的样式时。

2.样式表中的样式:

1.获取计算后的样式:最终层叠应用到一个元素上的所有样式列表。

DOM: var style=getComputedStyle(elem);

IE8:var style=elem.currentStyle;

解决浏览器兼容问题:

if(elem.currentStyle){//IE8+

var style=elem.currentStyle;

}else{//IE9+

var style=getComputedStyle(elem);

}

何时使用:只要获取一个元素的属性时都要获取计算后的样式

强调:getComputedStyle返回的style对象是只读的！

2.修改样式表中的样式:

1.样式表对象:<style></style>

获得样式表对象:

var sheet=document.styleSheets<i>;

sheet是CSSStyleSheet类型的对象

2.CSS规则对象:

var rule=sheet.cssRules<i>;

rule是CSSStyleRule类型的对象

rule对象下还可以继续包含cssRules集合

3.获取或设置规则中的属性:

rule.style.属性名="属性值";

例如:

<!DOCTYPE html>
<html>
<head>
<title>实现表盘样式的时间显示</title>
<meta charset="utf-8"/>
<link rel="Stylesheet" href="css/4_2.css"/>
<style>
#clock{width:100px; height:100px;
border-radius:50%;
border:4px solid black;
position:relative;
}
#s{width:2px; height:55px;
position:absolute; top:5px; left:49px;
background-color:red;
transform-origin:50% 45px;
-webkit-animation:rotateS 60s linear infinite;
}
#m{width:4px; height:50px;
position:absolute; top:10px; left:48px;
background-color:black;
transform-origin:50% 40px;
-webkit-animation:rotateM 3600s linear infinite;
}
#h{width:6px; height:45px;
position:absolute; top:15px; left:47px;
background-color:black;
transform-origin:50% 35px;
-webkit-animation:rotateH 43200s linear infinite;
}
@-webkit-keyframes rotateS{
0%{transform:rotate(0deg)}
100%{transform:rotate(360deg)}
}
@-webkit-keyframes rotateM{
0%{transform:rotate(0deg)}
100%{transform:rotate(360deg)}
}
@-webkit-keyframes rotateH{
0%{transform:rotate(0deg)}
100%{transform:rotate(360deg)}
}
</style>
<script src="js/4_2.js"></script>
</head>
<body>
<div id="clock">
<div id="h"></div>
<div id="m"></div>
<div id="s"></div>
<div id="a1">I</div>
<div id="a2">II</div>
<div id="a3">III</div>
<div id="a4">IIII</div>
<div id="a5">V</div>
<div id="a6">VI</div>
<div id="a7">VII</div>
<div id="a8">VIII</div>
<div id="a9">IX</div>
<div id="a10">X</div>
<div id="a11">XI</div>
<div id="a12">XII</div>
</div>
</body>
</html>

复制代码

下面是js文件:

var now=new Date();
var h=now.getHours();
h>12&&(h-=12);
var m=now.getMinutes();
var s=now.getSeconds();
//计算当前时间下时针，分针，秒针转过的角度
var sDeg=s*6;
var mDeg=m*6+sDeg/60;
var hDeg=h*30+mDeg/12;
//修改样式表中的样式属性
var sheet=document.styleSheets[1];
var sRule=sheet.cssRules[4];
sRule.cssRules[0].style.transform="rotate("+sDeg+"deg)";
sRule.cssRules[1].style.transform="rotate("+(sDeg+360)+"deg)";
var mRule=sheet.cssRules[5];
mRule.cssRules[0].style.transform="rotate("+mDeg+"deg)";
mRule.cssRules[1].style.transform="rotate("+(mDeg+360)+"deg)";
var hRule=sheet.cssRules[6];
hRule.cssRules[0].style.transform="rotate("+hDeg+"deg)";
hRule.cssRules[1].style.transform="rotate("+(hDeg+360)+"deg)";

复制代码

下面是页面效果:

[代码片段] DOM 修改元素样式属性

[代码片段] DOM 修改元素样式属性

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

阅读推荐

浏览过的版块

用微信扫一扫