JS获取HTML样式

最新推荐文章于 2022-09-25 10:37:55 发布

Annaluo

最新推荐文章于 2022-09-25 10:37:55 发布

阅读量1.9k

点赞数

分类专栏： JavaScript 文章标签： html 函数 bug jsp

本文链接：https://blog.csdn.net/Annaluo/article/details/77508072

版权

JavaScript 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

有些时候我们需要给页面添加动态效果，那么久需要获取一些HTML元素，但是很多时候都会遇到一些bug，得不到我们想要的结果，那么这个时候就需要用JS函数来解决了。

效果说明：随着页面打开的时间，DIV会越变越小，直到最后只有边框。文字“font-size”会以1PX为单位，不断增大。

效果图如下：

具体代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>获取样式</title>
    <style>
        #div1{
            width: 200px;
            height: 200px;
            background: #F00;
            border: 4px solid;
            font-size: 12px;
            color: aquamarine;
        }
    </style>
    <script>
        window.onload  = function () {
            startMove();
        }
        function startMove() {
            setInterval(function () {
                var oDiv = document.getElementById('div1');
                //alert(oDiv.style.width);
                oDiv.style.width = parseInt(getStyle(oDiv,'width'))-1+'px';//201 203
                oDiv.style.fontSize = parseInt(getStyle(oDiv,'fontSize'))+1+'px';
            },30)
        }
        //此函数获取行外样式，用于解决一些offset的bug
        function getStyle(obj,attr) {
            //currentStyle针对IE浏览器

            if(obj.currentStyle){
                return obj.currentStyle[sttr];
            }
            //getComputedStyle针对firefox浏览器
            else{
                return getComputedStyle(obj,false)[attr];
            }

        }
    </script>
</head>
<body>
<div id="div1">
    font-size
</div>
</body>
</html>