前端开发如何实现结构、样式、行为彻底分离

最新推荐文章于 2022-02-12 01:40:55 发布

奔跑如风

最新推荐文章于 2022-02-12 01:40:55 发布

阅读量1.5k

点赞数 2

分类专栏： HTML CSS JavaScript

本文链接：https://blog.csdn.net/qq331570870/article/details/72857551

版权

HTML 同时被 3 个专栏收录

5 篇文章 0 订阅

订阅专栏

JavaScript

5 篇文章 0 订阅

订阅专栏

CSS

3 篇文章 0 订阅

订阅专栏

严格意义上来讲，彻底分离就是结构只出现HTML的代码，没有任何的CSS、JS代码，甚至通过行为改变的HTML也应该写在JS代码里面。

HTML：index.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>image gallery</title>
        <link rel="stylesheet" href="layout/index.css" media="screen">
    </head>
    <body>
        <h1>Snapshots</h1>
        <ul id="imagegallery">
            <li>
                <a href="image/a.png" title="a">
                    <img src="image/a.png">
                </a>
            </li>
            <li>
                <a href="image/b.png" title="b">
                    <img src="image/b.png">
                </a>
            </li>
            <li>
                <a href="image/c.png" title="c">
                    <img src="image/c.png">
                </a>
            </li>
            <li>
                <a href="image/d.png" title="d">
                    <img src="image/d.png">
                </a>
            </li>
        </ul>
        <!--<img id="placeholder" src="image/p.png" alt="my image" />-->
        <!--<p id="description"> choose an image</p>-->
        <!--<div id="testid"></div>-->
        <script src="scripts/index.js"></script>
    </body>
</html>

CSS：index.css

body{
    font-family: "Helvetica", "Arial", serif;
    color: #333;
    background-color: #ccc;
    margin: 1em 10%;
}

h1{
    color: #333;
    background-color: transparent;
}

a{
    color: #c60;
    background-color: transparent;
    font-weight: bold;
    text-decoration: none;
}

ul{
    padding: 0;
}

li{
    float: left;
    padding: 1em;
    list-style: none;
}

#imagegallery{
    list-style: none;
}

#imagegallery li{
    list-style: inline;
}

#imagegallery li a img{
    border:0;
}

#placeholder{
    width: 50px;
    height: 50px;
}

JavaScript：index.js

function addLoadEvent(func){
    var oldonload = window.onload;
    if (typeof window.onload != 'function'){
        window.onload = func;
    }else {
        window.onload = function(){
            oldonload();
            func();
        }
    }
}

function insertAfter(newElement,targetElement){
    var parent = targetElement.parentNode;
    if (parent.lastChild == targetElement) {
        parent.appendChild(newElement);
    }else {
        parent.insertBefore(newElement, targetElement.nextSibling);
    }
}

function preparePlaceholder(){
    if (!document.createElement) return false;
    if (!document.createTextNode) return false;
    if (!document.getElementById) return false;
    if (!document.getElementById("imagegallery")) return false;
    var placeholder = document.createElement("img");
    placeholder.setAttribute("id","placeholder");
    placeholder.setAttribute("src","image/p.png");
    placeholder.setAttribute("alt","my image gallery");
    var description = document.createElement("p");
    description.setAttribute("id","description");
    var destext = document.createTextNode("choose one image");
    description.appendChild(destext);
    //document.getElementsByTagName("body")[0].appendChild(placeholder);
    //document.getElementsByTagName("body")[0].appendChild(description);
    var gallery = document.getElementById("imagegallery");
    //gallery.parentNode.insertBefore(placeholder,gallery);
    //gallery.parentNode.insertBefore(description,gallery);


    insertAfter(description,gallery);
    insertAfter(placeholder,gallery);

}



function prepareGallery(){
    if (!document.getElementsByTagName) return false;
    if (!document.getElementById) return false;
    if (!document.getElementById("imagegallery")) return false;

    var gallery = document.getElementById("imagegallery");
    var links = gallery.getElementsByTagName("a");

    for(var i=0; i<links.length; i++){
        links[i].onclick = function(){
            return showPic(this) ? false : true;
        }
    }
}

function showPic(whichpic){
    if (!document.getElementById("placeholder")) return false;
    var source = whichpic.getAttribute("href");
    var placeholder = document.getElementById("placeholder");
    placeholder.setAttribute("src", source);
    if (document.getElementById("description")){
        var text = whichpic.getAttribute("title") ? whichpic.getAttribute("title") : "";
        var description = document.getElementById("description");
        if (description.firstChild.nodeType == 3){
            description.firstChild.nodeValue = text;
        }
    }

    return true;
}
addLoadEvent(preparePlaceholder);
addLoadEvent(prepareGallery);

奔跑如风

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
前端开发如何实现结构、样式、行为彻底分离

严格意义上来讲，彻底分离就是结构只出现HTML的代码，没有任何的CSS、JS代码，甚至通过行为改变的HTML也应该写在JS代码里面。HTML：index.html image gallery Snapshots
复制链接

扫一扫