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. CentOS 7通过Firewall开放防火墙端口

    发现在CentOS 7上开放端口用iptables没效果(或者是sodino没找到正确的命令,传说Centos7 下默认的防火墙是 Firewall,替代了之前的 iptables)… 使用firew ...

  2. Docker 持续集成初次体验

    背景 在家的时候,实在不想做其他的,想起之前参加的一场关于docker的座谈会,于是想搞以下docker. 开始 在道客云上搞了一下持续集成,总体来说,比较好用的. 写了一个Go程序,就是之前写的发邮 ...

  3. 安装使用Entity Framework Power Tool Bate4 (Code First)从已建好的数据自动生成项目中的对应Model(新手贴,望各位大侠给予指点)

    从开始学习使用MVC以后,同时也开始接触EF,很多原理都不是太懂,只知道安装了EF以后,点击哪里可以生成数据库对应的Model,不用再自己手写Model.这里记录的就是如何从已建立好的数据库生成项目代 ...

  4. cad.net之ACAD移植到GCAD的自动加载问题

    将acad.pgp,lsp,fas,vlx,名称增加一份gcad.pgp,lsp,fas,vlx.涉及系统加载用. Lisp的拖拉加载在gcad无法通过lastprompt获取命令历史栏最后一行(含路 ...

  5. vue项目axios请求接口,后端代理请求接口404,问题出现在哪?

    在vue项目中,列表数据需要用到qq音乐接口中的数据,但是直接请求不行,有host及referer限制,需要采用后端代理的方式.借助axios及node的express,在dev-server.js中 ...

  6. JS简单表单验证

    这里我是写了一个简单的注册表单验证功能,亲测有效,一起来看看吧! 首先我的HTML代码是这样的: class大家可以忽略一下,这里我项目使用的是bootstrap的样式. 输入用户名和密码用的是正则表 ...

  7. .gitignore总结

    git进行管理时,.gitignore是必不可少的,可以指定不需要提交到仓库的资源.最好在git init之后就创建 .gitignore文件,这是个好习惯,常用的配置及说明如下:

  8. 【转】如何用css限制文字长度,使溢出的内容用省略号…显示

    文章转自这里(现在貌似被黑了,建议不要点击了) ps:因在该地方没看到转载按钮,复制下存到这里以待自己方便,别人能看到帮助一下更是乐意之至,效果亲测可以实现,兼容IE.谷歌.火狐 由于文字内容长度的不 ...

  9. 基于Django+celery二次开发动态配置定时任务 ( 一 )

    需求: 前端时间由于开发新上线一大批系统,上完之后没有配套的报表系统.监控,于是乎开发.测试.产品.运营.业务部.财务等等各个部门就跟那饥渴的饿狼一样需要 各种各样的系统数据满足他们.刚开始一天一个还 ...

  10. String.format(String format,Object... args)的用法

    String.format(String format, Object... args)方法详解 以前也看到过很多次这个用法,一直记不牢靠,今天整理一下.   我仅仅举几个例子稍做说明: String ...