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. 利用 TFLearn 快速搭建经典深度学习模型

      利用 TFLearn 快速搭建经典深度学习模型 使用 TensorFlow 一个最大的好处是可以用各种运算符(Ops)灵活构建计算图,同时可以支持自定义运算符(见本公众号早期文章<Tenso ...

  2. KNIME + Python = 数据分析+报表全流程

    Python 数据分析环境 数据分析领域有很多可选方案,例如SPSS傻瓜式分析工具,SAS专业性商业分析工具,R和python这类需要代码编程类的工具.个人选择是python这类,包括pandas,n ...

  3. MVC 视图不使用模板页的两种方法

    直接对view页面的Layout值设置null @{ Layout = null;//"~/Views/Shared/_Layout.cshtml"; } 对_ViewStart. ...

  4. .gitignore文件常用写法

    一般的项目代码中会涉及到密码.key/secret等隐私内容,不适合上传github公开.这时可以使用.gitignore文件来屏蔽这些文件的提交. 你可能用到的写法如下 写法 含义 /build/ ...

  5. maven项目无法新增java test目录的问题

    有时候当我们构建好maven项目时,再导入eclipse中会缺少src/main/java  和src/test/java,这是需要我们手动创建: 但是有时候在 项目视图下或者 enterprise ...

  6. mybatis---属性和字段映射

    1. 查询时使用别名,别名和属性名保持一致 <select id="getUser" parameterType="int" resultType=&qu ...

  7. C# 单元测试（入门）

    注:本文示例环境 VS2017XUnit 2.2.0 单元测试框架xunit.runner.visualstudio 2.2.0 测试运行工具Moq 4.7.10 模拟框架 什么是单元测试? 确保软件 ...

  8. POJ 2840

    #include<iostream> #include<stdio.h> #include<string> using namespace std; int mai ...

  9. 生成代码的代码 之 POJO生成器 之二 模板实现

    在之前的一篇博客中,我们写了利用node.js来生成JAVA的POJO代码的方法.有评论说可以利用模板来做这件事.当时认为模板只能做简单的字符串替换,所以可能无法完成任务.但是,仔细的学习了一个模板 ...

  10. Deep Learning (中文版&英文版)

    Bengio Yoshua,Ian J. Goodfellow 和 Aaron Courville共同撰写的<深度学习>(Deep Learning)是一本为了帮助学生及从业者入门机器学习 ...