JS 获取样式
/*
currentStyle 针对 IE浏览器
getComputedStyle 针对 ff浏览器
*/
function getStyle(obj,attr){
if(obj.currentStyle){
return obj.currentStyle[attr];
}else{
return getComputedStyle(obj,false)[attr];
}
}
栗子:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>透明度多物体变化动画</title>
<style>
*{margin: 0;padding: 0;}
#div1{
width: 300px;
height: 300px;
border: 12px solid black;
font-size: 12px;
color: #ddd;
background: #000000;
}
</style>
</head>
<body>
<div id="div1" style="">dddd</div>
<script>
window.onload = function(){
startMove();
getColor();
}
function startMove(){
var div = document.getElementById('div1');
setInterval(function(){
div.style.width = parseInt(getStyle(div,'width'))-1+'px';
div.style.fontSize = parseInt(getStyle(div,'fontSize'))+1+'px';
var rand=Math.round(Math.random()*1000000);
rand = rand<1000000?(rand+1000000 +'').slice(1):rand;
/*
如果不够六位数前面补0;
slice() 方法可从已有的数组中返回选定的元素。
arrayObject.slice(start,end)
--------------------------------------------------------------------------------------------------------------------------------------------
参数 | 描述
--------------------------------------------------------------------------------------------------------------------------------------------
start | 必需。规定从何处开始选取。如果是负数,那么它规定从数组尾部开始算起的位置。也就是说,-1 指最后一个元素,-2 指倒数第二个元素,以此类推。
--------------------------------------------------------------------------------------------------------------------------------------------
end | 可选。规定从何处结束选取。该参数是数组片断结束处的数组下标。如果没有指定该参数,那么切分的数组包含从 start 到数组结束的所有元素。如果这个参数是负数,那么它规定的是从数组尾部开始算起的元素。
--------------------------------------------------------------------------------------------------------------------------------------------
*/
// div.style.backgroundColor = "#"+rand;
div.style.backgroundColor = getColor();
},1500)
}
// 随机产生16进制颜色值
function getColor(){
var arrColor = ['0','1','2','3','4','5','6','7','8','9','a','b','c','d','e','f'];
var color ="#";
for(var i =0;i<6;i++){
color+=arrColor[Math.floor(Math.random()*16)];
}
return color;
}
/*
currentStyle 针对 IE浏览器
getComputedStyle 针对 ff浏览器
*/
function getStyle(obj,attr){
if(obj.currentStyle){
return obj.currentStyle[attr];
}else{
return getComputedStyle(obj,false)[attr];
}
}
</script>
</body>
</html>