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. 三、Kubernetes之深入了解Pod

      1.yaml格式的Pod配置文件内容及注解 深入Pod之前,首先我们来了解下Pod的yaml整体文件内容及功能注解. 如下: # yaml格式的pod定义文件完整内容: apiVersion: v ...

  2. mosh——Linux下基于UDP的SSH连接工具

    一:TCP over UDP 1.安装mosh yum install epel-releaseyum install mosh 2.使用客户端连接 mosh user@ip -p 3.查看mosh的 ...

  3. [实战演练]Intel面试题目 - 进栈出栈顺序问题

    电话面试中写C++,逻辑比较清楚的一个题目,一紧张就不能好好地写下来,漏洞百出.以前经常在完善的编译环境中写代码,换了一个白板子上写反而写的不通顺了,犯了一些基础错误,比如stack中的首个元素是to ...

  4. Android---------------解决bug的关键点

    一.抛出异常,打出异常的的堆信息 System.err.print("ceshi");      e.printStackTrace();     Log.i("cesh ...

  5. Python 基础之class魔术方法

    类的常用魔术方法:无需人为调用,基本是在特定的时刻自动触发,方法名被前后两个下划线包裹 魔术方法,总结表: __init__:构造函数.初始化的时候调用. __new__:对象实例化方法,其实这才是类 ...

  6. tomcat单机多实例部署

    最近在面试的过程中,一家公司在面试时提到了有关tomcat单机多实例部署的提问, 正好, 之前使用IntelliJ IDEA 13.1.4这款IDE开发web项目,在开发的过程中,因为有多个web项目 ...

  7. oracle exp imp日常使用

    http://www.cnblogs.com/ningvsban/archive/2012/12/22/2829009.html http://www.cnblogs.com/mq0036/archi ...

  8. Task异步编程，刨根到底

    1. 编译器到底对await做了什么 await 一个异步操作的时候,实际上编译器会创建一个状态机,这个状态机包含了调用者的上下文变量,状态机使用yield迭代器实现,状态机由clr调度,每次运行都会 ...

  9. 线程中的同步辅助类CountDownLatch

    四个类可协助实现常见的专用同步语句.Semaphore 是一个经典的并发工具.CountDownLatch 是一个极其简单但又极其常用的实用工具,用于在保持给定数目的信号.事件或条件前阻塞执行.Cyc ...

  10. (转)【OSGI】1.初识OSGI-到底什么是OSGI

    原文:https://blog.csdn.net/acmman/article/details/50848595 目前,业内关于OSGI技术的学习资源或者技术文档还是很少的.我在某宝网搜索了一下“OS ...