您的位置：首页 > Web前端 > CSS

JS获取样式改变样式

2016-08-18 16:04 323 查看

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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 函数 javascript

相关文章推荐

新的分享

章节导航

JS获取样式 改变样式

JS获取样式改变样式