demo5，鼠标移入移出改变样式，总结

来源：互联网发布：windows日志查询编辑：程序博客网时间：2024/06/05 07:03
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>鼠标移入移出改变样式</title>    <style>        div{            background-color: black;            color: #fff;            font-size: 12px;            width: 150px;            height: 150px;            margin: 10px auto;        }        .current{            background-color: coral;            cursor: crosshair;        }    </style></head><body>    <div id="change">鼠标移入改变样式，鼠标移出恢复</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;                }            }        };        window.onload = function () {            var div = document.getElementsByTagName("div")[0];            var handler1 = function () {                this.className = "current";            };            var handler2 = function () {                this.className = "";            };            EventUtil.addHandler(div, "mouseover", handler1);            EventUtil.addHandler(div, "mouseout", handler2);        }    </script></body></html>
1.对于两个状态互相转换的都是通过添加、移除class比较好。
阅读全文
0 0