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. 二、RHCSA试题解析

    一.设置YUM仓库 YUM的软件库源地址为:http://content.example.com/rhel7.0/x86_64/dvd,将此配置为操作系统的默认软件仓库. 方法一(修改配置文件): v ...

  2. [转载]DevOps发展的四个重要阶段

    DevOps是敏捷开发的延续,它将敏捷的精神延伸至IT运营(IT Operation)阶段.敏捷开发的主要目的是响应变化,快速交付价值.以2001年的敏捷宣言发布这个里程碑为起点,开始几年内企业主要在 ...

  3. 什么是PAGELATCH和PAGEIOLATCH

    在分析SQL server 性能的时候你可能经常看到 PAGELATCH和PAGEIOLATCH.比方说 Select * from sys.dm_os_wait_stats 的输出里面就有Latch ...

  4. kls与flag（map）

    题目传送门 这道题还挺搞笑的,\(map\)常数贼大还是把它水过了. 可以发现这道题求的是 \((j>i)j-i=h_i+h_j,j-i=|h_i-h_j|\)的对数. 那么显然,因为高度大于\ ...

  5. python收集jvm数据

    之前前辈用 java 写的收集 jvm 脚本, 不太方便组内小伙伴维护, 遂用 python 重写了 #!/usr/bin/env python # -*- coding: utf-8 -*- # F ...

  6. Swift5 语言指南(二十) 类型转换

    类型转换是一种检查实例类型的方法,或者将该实例视为与其自己的类层次结构中的其他位置不同的超类或子类. Swift中的类型转换是使用is和as运算符实现的.这两个运算符提供了一种简单而富有表现力的方法来 ...

  7. nginx常用的超时配置说明

    client_header_timeout 语法 client_header_timeout time默认值 60s上下文 http server说明 指定等待client发送一个请求头的超时时间(例 ...

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

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

  9. Numpy.random中shuffle与permutation的区别(转)

    huffle与permutation的区别 函数shuffle与permutation都是对原来的数组进行重新洗牌(即随机打乱原来的元素顺序):区别在于shuffle直接在原来的数组上进行操作,改变原 ...

  10. Redmine 删除 project 中的 public 选项

    缘由:由于manager的错误设置,导致本不该public的项目设置成public 诉求:去除项目新建及设置时的public勾选 1.查找日志 由于redmine是拿ruby编写的,且主页等都是由ht ...