行为样式结构相分离的页面

Posted xzlive

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了行为样式结构相分离的页面相关的知识,希望对你有一定的参考价值。

行为  样式  结构相分离的页面

JS        CSS       html

 

DOM 0写法

技术图片技术图片
技术图片
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <table border="1" width="300px">
        <tr onmousemove="t1(0);" onmouseout="t2(0)"><td>1</td><td>2</td><td>3</td></tr>
        <tr onmousemove="t1(1);" onmouseout="t2(1)"><td>1</td><td>2</td><td>3</td></tr>
        <tr onmousemove="t1(2);" onmouseout="t2(2)"><td>1</td><td>2</td><td>3</td></tr>
    </table>

    <script>
        //DOM 0实现的效果
        function t1(n){
            var mytrs = document.getElementsByTagName(‘tr‘)[n];
            console.log(mytrs);
            mytrs.style.backgroundColor = "red";
        }

        function t2(n){
            var mytrs = document.getElementsByTagName(‘tr‘)[n];
            console.log(mytrs);
            mytrs.style.backgroundColor = "";
        }
    </script>
</body>
</html>
技术图片
Demo

 

DOM 1写法

技术图片技术图片
技术图片
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    .c1{
        background-color: cadetblue;
        width: 300px;
    }
</style>
<body>
    <div class="c1">
        <table border="1" width="300px">
        <tr><td>1</td><td>2</td><td>3</td></tr>
        <tr><td>1</td><td>2</td><td>3</td></tr>
        <tr><td>1</td><td>2</td><td>3</td></tr>
    </table>
    </div>



    <script>
        //DOM 1实现的效果
        var myTrs = document.getElementsByTagName("tr");
        var len = myTrs.length;
        for(var i=0;i<len;i++){
            myTrs[i].onmouseover = function(){  //绑定事件
               this.style.backgroundColor = "red"; //谁调用这个函数,这个this就指向谁
            }
            myTrs[i].onmouseout = function(){
                this.style.backgroundColor = "";
            }

        }

    </script>
</body>
</html>
技术图片
Demo

 

第一种非常低效,每次都要在标签上绑定。

第二种相对高效一点,首先获取DOM对象,然后一次绑定。

以上是关于行为样式结构相分离的页面的主要内容,如果未能解决你的问题,请参考以下文章

行为 样式 结构 相分离的网站

结构和样式,行为的分离

JavaScript 知识点

前端小知识

结构与表现的分离

我对于前端开发的一些基本准则