码迷,mamicode.com
首页 > Web开发 > 详细

JS——操作属性

时间:2017-03-31 13:34:35      阅读:163      评论:0      收藏:0      [点我收藏+]

标签:disabled   gre   style   不可用   按钮   i++   bsp   margin   back   

操作属性:

对象.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 {
            width: 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>

 


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

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

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

对象.offsetWidth

JS——操作属性

标签:disabled   gre   style   不可用   按钮   i++   bsp   margin   back   

原文地址:http://www.cnblogs.com/weiyu11/p/6650572.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!