操作对象-小测试(完善) 获取运算后的值

最新推荐文章于 2024-05-02 01:29:05 发布

老源

最新推荐文章于 2024-05-02 01:29:05 发布

阅读量192

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/douyuanjun001/article/details/50824217

版权

javascript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>新建网页</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="老源博客" />
        <style>
        div{
             width:300px;
             height:300px;
             border-bottom:1px solid black;
        }
        .test1{
             
            background: green;
             
        }
        .test2{
            width: 300px;
            height: 300px;
            background: red;
        }
        </style>
        <script>
        //封装一个函数，返回运算后的值！获取css样式currentStyle，getComputedStyle
           function getstyle(obj , attr){
            return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj , null)[attr];
           }
        function t() {
            var div = document.getElementsByTagName('div')[0];
            if(div.className.indexOf('test1') >= 0){
                div.className = 'test2';
            }else{
                div.className = 'test1';
            }
            //alert(getstyle(div , 'width'));
            //return;//返回
            div.style.width = parseInt(getstyle(div , 'width')) + 5 + 'px';
            div.style.height = parseInt(getstyle(div , 'height')) + 5 + 'px';
            div.style.borderBottomWidth = parseInt(getstyle(div , 'borderBottomWidth')) + 1 + 'px';
        }
        </script>
</head>
    <body>
        <div οnclick="t()";>
            点击div，使其背景色红绿交替
            宽高增加5px；
            下边框增粗1px；
        </div>
    </body>
</html>