• JS——操作属性


    操作属性:

    对象.setAttribute('属性名','值'); - 添加属性
    对象.getAttribute('属性名'); - 获取属性值,如无此属性,那么返回null

    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title></title>
        <style type="text/css">
            .div1 {
                 100px;
                height: 50px;
                float: left;
                margin-right: 10px;
            }
        </style>
    </head>
    <body>
        <div class="div1" dd="1"></div>
        <div class="div1" dd="1"></div>
        <div class="div1" dd="0"></div>
        <div class="div1" dd="0"></div>
        <div class="div1"></div>
        <div class="div1"></div>
    
    </body>
    </html>
    <script type="text/javascript">
        var aa = document.getElementsByClassName("div1");
        for (var i = 0; i < aa.length; i++) {
            if (aa[i].getAttribute("dd") == "1")
                aa[i].style.backgroundColor = "green";
            else if (aa[i].getAttribute("dd") == "0")
                aa[i].style.backgroundColor = "yellow";
            else
                aa[i].style.backgroundColor = "red";
    
        }
    </script>


    对象.removeAttribute('属性名'); - 移除属性

    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title></title>
    </head>
    <body>
        <input type="button" value="按钮111" id="dd1" />
        <input type="button" value="按钮222" id="dd2" />
    
    </body>
    </html>
    <script type="text/javascript">
        var aaa = document.getElementById("dd1");
        var bbb = document.getElementById("dd2");
        //按钮111的点击事件
        aaa.onclick = function () {
            //按钮111添加一个属性不可用
            this.setAttribute("disabled", "disabled");
            //获取aaa中属性value的值
            var ccc = this.getAttribute("value");
            alert(ccc);
        }
        //bbb的点击事件
        bbb.onclick = function () {
            //移除aaa的disabled属性
            aaa.removeAttribute("disabled");
        }
    
    </script>

    2.验证5+5=?

    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title></title>
    </head>
    <body>
        5+5=
        <input type="text" id="dd1" data="10" />
         <input type="button" id="dd2" value="验证"/>
    
    </body>
    </html>
    <script type="text/javascript">
        var aaa = document.getElementById("dd1");
        var bbb = document.getElementById("dd2");
        //按钮111的点击事件
      
        //bbb的点击事件
        bbb.onclick = function () {
            var txt = aaa.getAttribute("data");
           
            if (txt == aaa.value)
                alert("正确");
            else
                alert("笨蛋");
        }
    
    </script>

     3.彩虹导航栏,移入变为灰色,移除变为原来的颜色。

    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title></title>
        <style type="text/css">
            .div1 {
                 100px;
                height: 50px;
                float: left;
                margin-right: 10px;
            }
        </style>
    </head>
    <body>
        <div class="div1" style="background-color: red" dd="red"></div>
        <div class="div1" style="background-color: blue" dd="blue"></div>
        <div class="div1" style="background-color: green" dd="green"></div>
        <div class="div1" style="background-color: pink" dd="pink"></div>
        <div class="div1" style="background-color: purple" dd="purple"></div>
        <div class="div1" style="background-color: yellow" dd="yellow"></div>
    
    </body>
    </html>
    <script type="text/javascript">
    
        var aaa = document.getElementsByClassName("div1");
        //中间变量存颜色
        var color;
        for (var i = 0; i < aaa.length; i++) {
            //鼠标移入事件
            aaa[i].onmouseover = function () {
                color = this.style.backgroundColor;
              
                this.style.backgroundColor = "gray";
            }
            //鼠标移除事件
            aaa[i].onmouseout = function () {
                this.style.backgroundColor = color;
            }
    
            //鼠标点击事件
        }
    
    </script>


    定时器:
    window.setTimeout(function(){},间隔时间毫秒);
    - 定时炸弹,延迟执行,只执行一次

    window.setInterval(function(){},间隔的时间毫秒);
    - 无限循环,每一次循环有间隔时间,一般不要小于20毫秒
    - 它是有返回值的,可以用一个变量来接收这个定时器对象

    window.clearInterval(要关闭的定时器对象);
    一旦执行这句代码,会立刻停止此定时器对象的执行

    对象.offsetWidth

  • 相关阅读:
    zabbix 配置发送邮件报警
    sql server 修改表结构语法大全
    SQL Server日期与字符串之间的转换
    Convert.ToDateTime(值),方法可以把一个值转化成DateTime类型。
    Oracle trunc()函数的用法
    Oracle job procedure 存储过程定时任务
    向数据库中插入一个DateTime类型的数据到一个Date类型的字段中,需要转换类型。TO_DATE('{0}','YYYY-MM-DD'))
    逗号分隔的字符串转换为行数据(collection)(续)
    Oracle中INSTR、SUBSTR和NVL的用法
    oracle中substr() instr() 用法
  • 原文地址:https://www.cnblogs.com/weiyu11/p/6650572.html
Copyright © 2020-2023  润新知