HTML5第十四课时汇总

最新推荐文章于 2022-03-13 16:44:30 发布

甲戌天火

最新推荐文章于 2022-03-13 16:44:30 发布

阅读量269

点赞数

分类专栏： HTML5

本文链接：https://blog.csdn.net/qq_36872096/article/details/76040172

版权

HTML5 专栏收录该内容

78 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>getelement系列方法</title>
</head>
<body>

<ul>
    <li name="jerei">张三</li>
    <li class="JEREH">李四</li>
    <li id="wangWu">王五</li>
    <li class="JEREH">孙六</li>
    <li name="jerei">田七</li>
</ul>

<button id="changeBtn">变！！</button>

</body>

<script>

    var btn = document.getElementById("changeBtn");
    btn.addEventListener("click",function () {
        /*getElementById   返回值最多有一个*/
//        var ww = document.getElementById("wangWu");
//        ww.style.color = "red";
        /*getElementsByName   getElementsByClassName
         不管有没有匹配结果，返回的数据类型都是对象数组*/
//        var jerei = document.getElementsByName("jerei");
//        for(var i = 0; i < jerei.length; i++){
//            jerei[i].style.color = "red";
//        }

//        var jereh = document.getElementsByClassName("JEREH");
//        for(var i = 0;i < jereh.length;i++){
//            jereh[i].style.color = "blue";
//        }

        var allList = document.getElementsByTagName("li");
        for(var i = 0;i < allList.length;i++){
            allList[i].style.color = "red";
        }
    })
</script>
</html>


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>点击事件</title>
</head>
<body>
<ul>
    <li>张三</li>
    <li>李四</li>
    <li>王五</li>
    <li>孙六</li>
    <li>田七</li>
</ul>
</body>
<script>
    //    var zhangSan = document.getElementById("zhangSan");
    //    zhangSan.addEventListener("click",function () {
    //        var content = zhangSan.innerHTML;
    //        alert(content);
    //    });

    /*最原始的方法*/
    /*var allList = document.getElementsByTagName("li");
     for(var i = 0; i < allList.length;i++){
     allList[i].addEventListener("click",function () {
     var content = allList[i].innerHTML;
     alert(content);
     });
     }*/

    /*匿名函数的自调用*/
    //    var allList = document.getElementsByTagName("li");
    //    for(var i = 0; i < allList.length;i++){
    //        (function (i) {
    //            allList[i].addEventListener("click",function () {
    //                var content = allList[i].innerHTML;
    //                alert(content);
    //            });
    //        })(i);
    //    }

    /*ES6的let常量*/
    //    var allList = document.getElementsByTagName("li");
    //    for(let i = 0; i < allList.length;i++){
    //        allList[i].addEventListener("click",function () {
    //            var content = allList[i].innerHTML;
    //            alert(content);
    //        })
    //    }


</script>
</html>


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>attribute</title>
</head>
<body>

<img src="../img/img1.jpg" alt="图片加载失败！" id="img">
<button id="get">获取图片信息</button>
<button id="change">改变图片信息</button>

</body>

<script>
    var getBtn = document.getElementById("get");
    var changeBtn = document.getElementById("change");
    var img = document.getElementById("img")

    getBtn.addEventListener("click",function () {
        var src = img.getAttribute("src");
        console.log(src);
    })

    changeBtn.addEventListener("click",function () {
        img.setAttribute("src","../img/left.jpeg")
    })
    
</script>
</html>




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        #div1{
            width: 200px;
            height: 200px;
            background-color: red;
        }
        #div2{
            width: 200px;
            height: 200px;
            background-color: blue;
        }
    </style>
    <title>setAttribute存在的问题</title>
</head>
<body>

<div id="div1"></div>
<div id="div2"></div>


</body>

<script>
    var div1 = document.getElementById("div1");
    var div2 = document.getElementById("div2");
    //    div1.setAttribute("onclick","showColor('红')");
    //    div2.setAttribute("onclick","showColor('蓝')");

    //    div1.onclick = 'showColor("1212")';

    div1.onclick = function () {
        alert("红");
    };
    div2.onclick = function () {
        alert('蓝');
    };



    function showColor(color) {
        alert(color);
    }
</script>
</html>

甲戌天火

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5第十四课时汇总

html>lang="en"> charset="UTF-8"> getelement系列方法 name="jerei">张三 class="JEREH">李四 id="wangWu">王五 class="JEREH">孙六 name="jerei">田七id="changeBtn">变！！ var btn
复制链接

扫一扫