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

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[].onclick = function () {

        a[].setAttribute("disabled","disabled")    // disable="disable"  不可用

    }

    a[].onclick = function () {

        a[].removeAttribute("disabled")

    }

</script>

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

<head>

    <title></title>

</head>

<body>

    +=

    <input type ="text"  class="c1"/>

    <input type ="button" value ="验证" " da="" class="c1"/>

</body>

</html>

<script type ="text/javascript">

    var a = document.getElementsByClassName("c1");

    a[].onclick = function () {

        var c = a[].value;

        var d = a[].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=""></div>

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

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

    <div class="div" aa=""></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 = ; i < oDivs.length; i++) {

            if (oDivs[i].getAttribute('aa') == '')

                oDivs[i].style.backgroundColor = "blue";

            if (oDivs[i].getAttribute('aa') == '')

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

        }

    }

</script>

效果图

  
 

JS DOM操作（三） Window.docunment对象——操作属性的更多相关文章

  1. JS DOM操作（二） Window.docunment对象——操作样式

    一 对元素的定位 在 js 中可以利用 id.class.name.标签名进行元素的定位 id.class  用在客户端 name  用在服务端 用 id 定位                  -- ...

  2. JS DOM操作（五） Window.docunment对象——操作元素

    定位: var a = document.getElementByIt( "id" ) 同辈元素 var b = a.nextSibling;            -- 找 a ...

  3. JS DOM操作（四） Window.docunment对象——操作内容

    操作内容:即对标签所夹内容的操作 一 非表单元素内容操作 定位 var a = document.ElementById( "id" ) 1.获取内容 var s = a.inne ...

  4. JavaScript的DOM操作。Window.document对象

    间隔执行一段代码:window.setlnteval("需要执行的代码",间隔毫秒数) 例 :      window.setlnteval("alert("你 ...

  5. js switch判断 三目运算 while 及 属性操作

    三 目运算:如var a = 10: var b= 12: c = a>b ?a:b; 若成立执行a否则执行b var isHide = true; 若用if判断语句如下 if(isHide) ...

  6. Python脚本控制的WebDriver 常用操作 <十七> 获取测试对象的属性及内容

    测试用例场景 获取测试对象的内容是前端自动化测试里一定会使用到的技术.比如我们要判断页面上是否显示了一个提示,那么我们就需要找到这个提示对象,然后获取其中的文字,再跟我们的预期进行比较.在webdri ...

  7. JS中基本window.document对象操作以及常用事件！

    一.找到元素 1.document.getELementById("id"):根据id找,最多找一个. var a=document.getELementById("id ...

  8. DOM操作（Window.document对象）

    间隔与延迟: 间隔一段代码: window.setInterval("代码",间隔执行秒数) 延迟一段时间后执行一段代码: window.setTimeout("执行代码 ...

  9. AIR文件操作(二):使用文件对象操作文件和目录

    转载于:http://www.flashj.cn/wp/air-file-operation2.html 文件对象是啥?文件对象(File对象)是在文件系统中指向文件或目录的指针.由于安全原因,只在A ...

随机推荐

  1. 数据库索引、B树、B+树

    数据库索引,是数据库管理系统中一个排序的数据结构,以协助快速查询.更新数据库表中数据.索引的实现通常使用B树及其变种B+树. 在数据之外,数据库系统还维护着满足特定查找算法的数据结构,这些数据结构以某 ...

  2. 【转】AngularJs HTTP请求响应拦截器

    任何时候,如果我们想要为请求添加全局功能,例如身份认证.错误处理等,在请求发送给服务器之前或服务器返回时对其进行拦截,是比较好的实现手段. angularJs通过拦截器提供了一个从全局层面进行处理的途 ...

  3. 【062新题】OCP 12c 062出现大量新题-15

    choose one In your Oracle 12c database, you plan to execute the command: SQL> CREATE TABLESPACE t ...

  4. 值不能为 null。 参数名: source

    今天调试程序总是报一个异常: 值不能为 null.参数名: source 异常详细信息: System.ArgumentNullException: 值不能为 null.参数名: source 通过断 ...

  5. mybatis 全局配置文件

    传送门:mybatis XML 映射配置文件官方文档 配置文件中的标签顺序不能颠倒,否则会报错. <?xml version="1.0" encoding="UTF ...

  6. 【xsy2815】净空 大暴力

    绝了场上居然没做这一题 题目大意:给你一个数$x=\Pi_{i=1}^{n}a_i!$. 你需要将x表示为$x=\Pi_{i=1}^{m}(c_i!)^{d_i}p$ 满足$p$无法再分解,且$(c_ ...

  7. [Leetcode]134.加油站

    这一题是贪心不是模拟 是贪心不是模拟 是贪心不是模拟! 如果用模拟的做法会比较慢,也失去了做这一题的趣味了. 模拟的方法很简单,就是每一个加油站都做起点模拟一遍,试一下能不能完成一圈,能完成一圈就保存 ...

  8. 【spring揭秘】1、关于IOC的基础概念

    1.基础概念 IOC有三种注入方式: 1.构造方法注入,就是通过构造方法进行实例化成员属性对象,优点是实现对象之后直接就可以使用,但是参数过多也是个麻烦 2.setter方法注入,实现相应的sette ...

  9. War文件部署

    其实,开始要求将源码压缩成War文件时,一头雾水! 公司项目要求做CAS SSO单点登录 也就是这玩意.... 其实war文件就是Java中web应用程序的打包.借用一个老兄的话,“当你一个web应用 ...

  10. linux free命令详解（一）

    一. 作用 free命令可以显示当前系统未使用的和已使用的内存数目,还可以显示被内核使用的内存缓冲区. 二. 语法 free [选项] 三. 选项       默认情况下,即在没有选项的情况下,&qu ...