JS——操作属性

时间：2023-03-08 17:36:33

操作属性：

对象.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=""></div>

    <div class="div1" dd=""></div>

    <div class="div1" dd=""></div>

    <div class="div1" dd=""></div>

    <div class="div1"></div>

    <div class="div1"></div>

</body>

</html>

<script type="text/javascript">

    var aa = document.getElementsByClassName("div1");

    for (var i = ; i < aa.length; i++) {

        if (aa[i].getAttribute("dd") == "")

            aa[i].style.backgroundColor = "green";

        else if (aa[i].getAttribute("dd") == "")

            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>

    +=

    <input type="text" id="dd1" data="" />

     <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 {

            width: 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 = ; 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

相关文章