七.提取行间事件

最新推荐文章于 2024-07-12 20:49:16 发布

qbz-1234

最新推荐文章于 2024-07-12 20:49:16 发布

阅读量98

点赞数

文章标签： html javascript

本文链接：https://blog.csdn.net/qubaozhong1234/article/details/114807017

版权

/*
提取行间事件
具体实现：
提取事件
–为元素添加事件
事件和其他属性一样，可以用JS添加
window.onload的意义
行为，样式，结构三者分离。
获取一组元素 --getElementsByTagName
*/
style样式，具体实现代码如下：

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>style</title>
    <style>
        #ee{
           background-color: green;
           width: 300px;
           height: 200px;
        }
    </style>
    <script>
        // 1.style加样式  行间
        // 2.style取样式  行间
        function refd(){
           var abc = document.getElementById("ee");
        //通过style样式加进去的都是加在了行间
           // abc.style.backgroundColor = "red";
           alert(abc.style.background);
        }
   </script>
</head>
<body>
<input type="button" value="变红" onclick="refd()">
    <!-- <div id="ee" style="background-color: green;"></div> -->
    <div id="ee"></div>
</body>
</html>

匿名函数提取事件,具体代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <script>
        window.onload=function(){
            var oBtn=document.getElementById('btn1');
            oBtn.onclick=function(){ //匿名函数
                alert('a');
            };
        };
    </script>
</head>
<body>
    <input id="btn1" type="button" value="按钮"/>
</body>
</html>

getElementByTagName具体实现过程如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>getElementByTagName</title>
    <!-- window.onload  页面加载完成的时候发生
         行为，样式，结构三者分离
         JS    CSS  HTML
    -->
    <style>
      div{
          width: 200px;
          height: 200px;
          float: left;
          border: 1px solid black;
          margin: 10px;
      }
    </style>
    <script>
     window.onload=function (){
         var aDiv=document.getElementsByTagName('div');
        //  alert(aDiv.length);
        // aDiv.style.background='red';
        for(var i=0;i<aDiv.length;i++){
            //i->0,1,2,3
            aDiv[i].style.background='red';
        };
        // aDiv[0].style.background='red';
        // aDiv[1].style.background='red';
        // aDiv[2].style.background='red';
        // aDiv[3].style.background='red';
     };
    </script>
</head>
<body>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</body>
</html>

不选，全选，反选，具体实现如下：


```go
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>不选，全选，反选</title>
    <script>
        window.onload = function() {
           var oBtn1 = document.getElementById('btn1');
           var oBtn2 = document.getElementById('btn2');
           var oBtn3 = document.getElementById('btn3');
           var oDiv = document.getElementById('div1');
           var aCh = document.getElementsByTagName('input');
           oBtn1.onclick = function () {
                //    aCh[0].checked=true;
                for (var i = 0; i < aCh.length; i++) {
                    aCh[i].checked = true;
                }
            };
            oBtn2.onclick = function () {
                //    aCh[0].checked=true;
                for (var i = 0; i < aCh.length; i++) {
                    aCh[i].checked = false;
                }
            };
            oBtn3.onclick = function () {
                //    aCh[0].checked=true;
                for (var i=0;i<aCh.length;i++) {
                    // aCh[i].checked = false;
                    if(aCh[i].checked==true){
                        aCh[i].checked=false;
                    }
                    else
                    {
                         aCh[i].checked=true;
                    }
                }
            };
        };
    </script>
</head>
<body>
    <input id="btn1" type="button" value="全选"/><br>
    <input id="btn2" type="button" value="不选"/><br>
    <input id="btn3" type="button" value="反选"/><br>
    <div id="div1"></div>
    <input type="checkbox"/><br>
    <input type="checkbox"/><br>
    <input type="checkbox"/><br>
    <input type="checkbox"/><br>
    <input type="checkbox"/><br>
    <input type="checkbox"/><br>
    <input type="checkbox"/><br>
    <input type="checkbox"/><br>
    <input type="checkbox"/><br>
    <input type="checkbox"/><br>
</body>
</html>

qbz-1234

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
七.提取行间事件

/*提取行间事件具体实现：提取事件–为元素添加事件事件和其他属性一样，可以用JS添加window.onload的意义行为，样式，结构三者分离。获取一组元素 --getElementsByTagName*/style样式，具体实现代码如下： <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" conte
复制链接

扫一扫