demo1，控制div属性，总结

最新推荐文章于 2021-06-18 14:14:01 发布

ZZZZJW

最新推荐文章于 2021-06-18 14:14:01 发布

阅读量300

点赞数

分类专栏：总结

本文链接：https://blog.csdn.net/q834344798/article/details/77511645

版权

总结专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>控制div属性</title>
    <style>
        body{
            text-align: center;
        }
        #box{
            margin: 10px auto;
            width: 100px;
            height: 100px;
            background-color: black;
        }
    </style>
</head>
<body>
    <div id="buttons">
        <input type="button" value="变宽" />
        <input type="button" value="变高" />
        <input type="button" value="变色" />
        <input type="button" value="隐藏" />
        <input type="button" value="重置" />
    </div>

    <div id="box"></div>
    <script>

        var EventUtil = {
            addHandler: function (element, type, handler) {
                if (element.addEventListener) {
                    element.addEventListener(type, handler, false);
                }
                else if (element.attachEvent) {
                    element.attachEvent("on" + type, handler);
                }
                else {
                    element["on" + type] = handler;
                }
            },
            removeHandler: function (element, type, handler) {
                if (element.removeEventListener) {
                    element.removeEventListener(type, handler, false);
                }
                else if (element.detachEvent) {
                    element.detachEvent("on" + type, handler);
                }
                else {
                    element["on" + type] = null;
                }
            },
            getEvent: function (event) {
                return event?event:window.event;
            },
            getTarget: function (event) {
                return event.target || event.srcElement;
            },
            preventDefault: function (event) {
                if (event.preventDefault) {
                    event.preventDefault();
                }
                else {
                    event.returnValue = false;
                }
            },
            stopPropagation: function (event) {
                if (event.stopPropagation) {
                    event.stopPropagation();
                }
                else {
                    event.cancelBubble = true;
                }
            },
            getCharCode: function (event) {
                if (typeof event.charCode == "number") {
                    return event.charCode;
                }
                else {
                    return event.keyCode;
                }
            }
        };
        function changeStyle(elem, attr, value) {
            elem.style[attr] = value;
        }
        window.onload = function () {

            var box = document.getElementById("box");
            var buttons = document.getElementById("buttons");

            EventUtil.addHandler(buttons, "click", function (event) {
               var event = EventUtil.getEvent(event);
               var target = EventUtil.getTarget(event);

               switch (target.value) {
                   case "变宽":
                       changeStyle(box, "width", "200px");
                       break;

                   case "变高":
                       changeStyle(box, "height", "200px");
                       break;

                   case "变色":
                       changeStyle(box, "backgroundColor", "red");
                       break;

                   case "隐藏":
                       changeStyle(box, "display", "none");
                       break;

                   case "重置":
                       changeStyle(box, "cssText", "");
                       changeStyle(box, "display", "block");
                       break;
               }
            });
        }


    </script>
</body>
</html>