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

Posted 酒不醉心

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JS DOM操作 Window.docunment对象——操作属性相关的知识,希望对你有一定的参考价值。

 

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 {
            width: 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操作 Window.docunment对象——操作属性的主要内容,如果未能解决你的问题,请参考以下文章

JS中的DOM— —节点以及操作

Js操作-DOM操作

为什么说js操作DOM很慢

Js之浅谈dom操作

JS之DOM操作

js面试题-----DOM操作和BOM操作