zoukankan      html  css  js  c++  java
  • DOM属性和事件

    1-22 DOM属性设置与获取

     
    1、获取属性:
    getAttribute("attribute");
    var p = document.getElementById("text");
    // 获取p标签本身具有的id和align属性:
    // 方法:*.id、*.align(class属性除外)
    console.log(p.id);
    console.log(p.align);
    // 如果想获取自定义的属性,得用此方法:
    console.log(p.getAttribute("data-opq"));
    var input = document.getElementById("user");
    console.log(user.name);
    2、设置属性:
    // 给p标签设置一个data-color属性:
    p.setAttribute("data-color","red");//p.setAttribute("属性名","属性值")
    user.setAttribute("isRead","false");
    3、 删除属性:

    p.removeAttribute("align");

    · 2-9 DOM0级事件

     
    DOM0级事件
    语法:ele.事件 = 执行脚本
    功能:在DOM对象上绑定事件
    说明:执行脚本可以使一个匿名函数,也可以是一个函数的调用,如果调用函数,语法是:ele.事件=函数名,不加括号
    不建议使用HTML事件原因: 1.多元素绑定相同事件时,效率低 2.不建议在HTML元素中写JS代码
     1 <script>
     2 var btn=document.getElementById("btn");
     3 btn.onclick=function(){
     4     //判断如果按钮时锁定,则显示为解锁,变为灰色,否则显示为锁定,变为蓝色
     5     if(this.className=="lock"){
     6         this.className="unlock";
     7         this.innerHTML="解锁";
     8         this.style.backgrouncolor="gray";
     9     }else{
    10         this.className="lock";
    11     this.innerHTML="锁定";
    12     }
    13     
    14 }
    15 </script>
    </style>
    <body>
        <div id="btn" class="lock">锁定</div>
    </body>
    <script>
    var btn=document.getElementById("btn");
    function clickBtn(){
        alert("我是按钮");
    }
    //点击按钮调用clickBtn这个函数
    btn.onclick=clickBtn;//此时调用的不是匿名函数时不要写小括号
    </script>

     原图在这

  • 相关阅读:
    单调队列 POJ 2823
    大组合数取mod lucas 定理
    多校4
    多校2
    2016多校1
    百度之星 初赛B续
    iot-web增加apis-namespace组件
    25.75k8s
    新项目增加gradlew
    vue图片点击放大预览v-viewer
  • 原文地址:https://www.cnblogs.com/lvlisn/p/11626334.html
Copyright © 2011-2022 走看看