首页 > 代码库 > JS DOM操作（二） Window.docunment对象——操作属性

JS DOM操作（二） Window.docunment对象——操作属性

2024-09-11 17:32:10   215人阅读

属性：是对象的性质与对象之间关系的统称。HTML中标签可以拥有属性，属性为 HTML 元素提供附加信。

属性总是以名称/值对的形式出现，比如：name="value"。

属性值始终被包括在引号内。双引号是最常用的，在某些个别的情况下，比如属性值本身就含有双引号，必须使用单引号，

属性总是在 HTML 元素的开始标签中规定。

属性实例

HTML 链接由 <a> 标签定义。链接的地址在 href 属性中指定：

                                < a href="http://www.baidu.com"> a </a>

<h1> 定义标题的开始。

                                <h1 align="center"> 拥有关于对齐方式的附加信息。

<body> 定义 HTML 文档的主体。

                                <body bgcolor="yellow"> 拥有关于背景颜色的附加信息。

<table> 定义 HTML 表格。

                                  <table border="1"> 拥有关于表格边框的附加信息。

对属性的操作

1、通过定位找到该元素存与变量中

               var  a =  document.getElementById("id")

2、对该元素的属性进行操作
    a.setAttribute( “ 属性名”，“属性值” )；  
                                                         -- 添加更改属性
    a.getAttribute( " 属性名 " );
                                                         -- 获取属性的值
    a.removeAttribute( " 属性名 " );
                                                         -- 移除属性
                                                         -- 最新的属性会覆盖原来的属性不会出现2个相同的属性
 
 
 
 
 
 
例题
   建按钮与有背景色的div，点击按钮背景色改变
技术分享 
<head>
    <title></title>
    <style type="text/css">
        .div {
            width: 100px;
            height: 100px;
            background-color: red;
            float: left;
            margin-right: 10px;
        }
    </style>
</head>
<body>

    <input type="button" value=http://www.mamicode.com/"验证" id="btn1" /><br />

    <div class="div" aa="1"></div>
    <div class="div" aa="1"></div>
    <div class="div" aa="0"></div>
    <div class="div" aa="0"></div>
    <div class="div"></div>
    <div class="div"></div>

</body>
</html>

<script type="text/javascript">
    document.getElementById(‘btn1‘).onclick = function () {
        var oDivs = document.getElementsByClassName(‘div‘);

        for (var i = 0; i < oDivs.length; i++) {
            if (oDivs[i].getAttribute(‘aa‘) == ‘1‘)
                oDivs[i].style.backgroundColor = "blue";
            if (oDivs[i].getAttribute(‘aa‘) == ‘0‘)
                oDivs[i].style.backgroundColor = "green";
        }
    }

</script>
View Code

效果图

技术分享

技术分享

 
 
                                     
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

JS DOM操作（二） Window.docunment对象——操作属性


联系
我们