demo2，网页换肤，总结

来源：互联网发布：便宜的鼠标知乎编辑：程序博客网时间：2024/06/04 05:40
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>网页换肤</title>    <style>        *{            padding: 0;            margin: 0;        }        li{            list-style: none;        }        a{            color: #fff;            text-decoration: none;        }        html,body{            width: 100%;            height: 100%;        }        body{            display: -webkit-flex; /* Safari */            display: flex;        }        #wrap{            width: 500px;            margin: auto;        }        #skin li{            cursor: pointer;            display: inline-block;            width: 10px;            height: 10px;        }        #red{            background-color: red;            border: 5px solid red;        }        #green{            background-color: green;            border: 5px solid green;        }        #black{            background-color: black;            border: 5px solid black;        }        .current{            background-color: #fff!important;        }        #menu{            display: -webkit-flex; /* Safari */            display: flex;            justify-content: space-around;            background-color: #fff;            border: 1px solid #fff;        }        #menu li{            padding: 0 25px;        }    </style>    <link rel="stylesheet" href="style/red.css" /></head><body><div id="wrap">    <ul id="skin">        <li id="red" class="current"></li>        <li id="green"></li>        <li id="black"></li>    </ul>    <ul id="menu">        <li><a href="#">新闻</a></li>        <li><a href="#">娱乐</a></li>        <li><a href="#">体育</a></li>        <li><a href="#">电影</a></li>        <li><a href="#">音乐</a></li>        <li><a href="#">旅游</a></li>    </ul></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 oLink = document.getElementsByTagName("link")[0];        var body = document.getElementsByTagName("body")[0];        var skinBtn = document.getElementById("skin");        var li = skinBtn.getElementsByTagName("li");        EventUtil.addHandler(skinBtn, "click", function (event) {            var event = EventUtil.getEvent(event);            var target = EventUtil.getTarget(event);            if (target != skinBtn) {                for (var p in li) li[p].className = "";                target.className = "current";                oLink["href"] = "style/" + target.id + ".css";            } else {                //            }        })    }</script></body></html>
1.通过改变link的href来引用不同的样式文件从而实现网页换肤；
2.添加class无法改变与id中相同的属性，在class中加入!important覆盖；
3.在容器中设置display：flex；justify-content: space-around；实现菜单等间隔排列。
阅读全文
0 0