• 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

  • 相关阅读:
    值得学习的网站
    搜集的前端面试题,慢慢补充完答案
    vue2.0 transition 多个元素嵌套使用过渡
    vue2.0过度动画
    Vue中data、props、computed中数据的区别
    理解 $nextTick 的作用
    项目中使用better-scroll实现移动端滚动,报错:Cannot read property 'children' of undefined better-scroll
    less预编译语言使用总结
    vue项目配置less预编译语言
    CrossApp 0.3.8 发布,跨平台移动App开发引擎
  • 原文地址:https://www.cnblogs.com/weiyu11/p/6650572.html
Copyright © 2020-2023  润新知