JS获取样式 改变样式

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>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值