JS基础属性的 DOM 操作

1、属性

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

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

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

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

2、属性实例

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"> 拥有关于表格边框的附加信息。

3、对属性的操作

（1）通过定位找到该元素存于变量中

var a = document.getElementById("id")

（2）对该元素的属性进行操作

a.setAttribute( “ 属性名”，“属性值” )； // 添加更改属性

a.getAttribute( " 属性名 " ); 　　　　　　// 获取属性的值

a.removeAttribute( " 属性名 " ); 　　　　//移除属性

　　最新的属性会覆盖原来的属性不会出现2个相同的属性, 直接用属性名=属性值就能给属性修改，给属性赋值

上代码示例

例1、建2个按钮，点击第一个按钮，按钮本身变为不可用，点击第二个按钮第一个按钮变为可用

<head>
    <title></title>
</head>
<body> 
    <input type ="button" value ="第一个按钮" class="c1" /> 
    <input type ="button" value ="第二个按钮" class="c1" /> 
</body>
</html>
<script type="text/javascript"> 
    var a = document.getElementsByClassName("c1")
    a[0].onclick = function () { 
        a[0].setAttribute("disabled","disabled")    // disable="disable"  不可用
    } 
    a[1].onclick = function () {
        a[0].removeAttribute("disabled")
    } 
</script>

例 2、做一个问题，输入答案如果正确弹出正确，错误弹出错误

<head>
    <title></title>
</head>
<body> 
    5+5=
    <input type ="text"  class="c1"/>
    <input type ="button" value ="验证" " da="10" class="c1"/> 
</body>
</html> 
<script type ="text/javascript"> 
    var a = document.getElementsByClassName("c1"); 
    a[1].onclick = function () {
        var c = a[0].value;
        var d = a[1].getAttribute("da"); 
        if (d == c) 
            alert("正确");     
        else 
            alert("笨蛋！！！");     
    } 
</script>

效果

例3、建按钮与有背景色的div，点击按钮背景色改变

<head>
    <title></title>
    <style type="text/css">
        .div {
             100px;
            height: 100px;
            background-color: red;
            float: left;
            margin-right: 10px;
        }
    </style>
</head>
<body> 
    <input type="button" value="验证" 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>

效果图

JS基础 属性的 DOM 操作

JS基础属性的 DOM 操作