操作对象-小测试(完善)-9

1,121

阅读模式

    <!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="布尔教育 http://www.itbool.com" />
            <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 onclick="t()";>
                点击div，使其背景色红绿交替
                宽高增加5px；
                下边框增粗1px；
            </div>
        </body>
    </html>