操作对象-小测试 –8

  • 1,026

操作对象-小测试 –8

<!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>
        .test1{
            
            background: green;
            
        }
        .test2{
            width: 300px;
            height: 300px;
            background: red;
        }
        </style>
        <script>
        function t() {
            var div = document.getElementsByTagName('div')[0];
            if(div.className.indexOf('test1') >= 0){
                div.className = 'test2';
            }else{
                div.className = 'test1';
            }
            div.style.width = parseInt(div.style.width) + 5 + 'px';
            div.style.height = parseInt(div.style.height) + 5 + 'px';
            div.style.borderBottomWidth = parseInt(div.style.borderBottomWidth) + 1 + 'px';
        }
        </script>
</head>
    <body>
        <div onclick="t()"; style = "width:300px;height:300px;border-bottom:1px solid black;">
            点击div,使其背景色红绿交替
            宽高增加5px;
            下边框增粗1px;
        </div>
    </body>
</html>

 

weinxin
我的微信
这是我的微信扫一扫
开拓者博主
  • 本文由 发表于 2016年6月3日22:20:31
  • 转载请务必保留本文链接:https://www.150643.com/49.html
匿名

发表评论

匿名网友 填写信息