码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2020-03-09 17:38:43      阅读:59      评论:0      收藏:0      [点我收藏+]

标签:his   close   sed   tab   var   hide   调用   标签   页面   

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

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对象,然后一次绑定。

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

标签:his   close   sed   tab   var   hide   调用   标签   页面   

原文地址:https://www.cnblogs.com/xzlive/p/12449686.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!