JS获取样式改变样式

最新推荐文章于 2021-11-25 16:06:55 发布

D000

最新推荐文章于 2021-11-25 16:06:55 发布

阅读量327

点赞数

分类专栏： JavaScript 文章标签：函数 javascript

本文链接：https://blog.csdn.net/u011171159/article/details/52241899

版权

JavaScript 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

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>