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. Python 数据结构与算法—— 快排

    1. 先从待排序的数组中找出一个数作为基准数(取第一个数即可),然后将原来的数组划分成两部分:小于基准数的左子数组和大于等于基准数的右子数组.然后对这两个子数组再递归重复上述过程,直到两个子数组的所有 ...

  2. docker容器中的peewee如何连接已有的容器中的数据库

    首先,两个容器必须是在同一网络下,有2个办法. 一个是在同一个docker-compose.yml文件下使用links参数,比如: version: '3' services: redis: imag ...

  3. dapper视频

    dapper是dotnet下的一种小巧快捷的ORM框架,本视频主要讲解了dapper的多库使用,以及常见的操作,如:对象查询.多集合查询,关联查询等,添加.修改.删除等. 视频地址:https://w ...

  4. spring cloud学习(一) 服务注册

    首先spring-cloud相关的简介可以去百度搜索,这里就不多说了,这里分享一个翻译spring cloud官网的中文网站spring cloud中文网 这个学习项目的代码放在 https://gi ...

  5. 【Spark算子】：reduceByKey、groupByKey和combineByKey

    在spark中,reduceByKey.groupByKey和combineByKey这三种算子用的较多,结合使用过程中的体会简单总结: 我的代码实践:https://github.com/wwcom ...

  6. 使用Flexbox：新旧语法混用实现最佳浏览器兼容

    Flexbox非常的棒,肯定是未来布局的一种主流.在过去的几年这之中,语法改变了不少,这里有一篇“旧”和“新”新的语法区别教程(如果你对英文不太感兴趣,可以移步阅读中文版本).但是,如果我们把Flex ...

  7. 设计模式《JAVA与模式》之访问者模式

    在阎宏博士的<JAVA与模式>一书中开头是这样描述访问者(Visitor)模式的: 访问者模式是对象的行为模式.访问者模式的目的是封装一些施加于某种数据结构元素之上的操作.一旦这些操作需要 ...

  8. 怎么把excel表格内的数据导入数据库？

    第一种方法: 思路:想要把excel表格内的数据直接导入数据库不是那么容易,可以把excel表格另存为.csv格式的文档(特点:内容以逗号分割):然后通过一系列的文档操作函数处理成为一个二维数组,然后 ...

  9. (转)Java并发编程：线程池的使用方法

    http://www.cnblogs.com/dolphin0520/p/3932921.html http://www.journaldev.com/1069/java-thread-pool-ex ...

  10. Vue2.5开发去哪儿网App 第四章笔记 下

    1.解决非父子组件之间的传值问题 非父子组件传值(Bus/总线/发布订阅模式/观察者模式) 给 Vue类上挂在一个属性,然后创建vue实例时,实例就拥有了这个属性 Vue.prototype.bus ...