demo1，控制div属性，总结

来源：互联网发布：网络直播怎么赚钱的编辑：程序博客网时间：2024/06/04 19:15
<!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>
1.firefox中要传入event到函数里才能获取当前事件或者target；
2.csstext就是在html标签上的内敛样式，如果element.style.cssText = “”，即清空内敛样式;
阅读全文
0 0