JavaScrip——DOM操作(属性操作)
Attribute
a.setAttribute("属性名","属性值")——设置属性
a.getSttribute("属性名")——获取属性
a.removeAttribute("属性名")——移除属性
举例说明:
例子1:做一个问题,如果输入的答案正确则弹出正确,错误弹出错误;
这里在text里面写了一个daan属性,里面存了答案的值,点击检查答案的时候cheak输入的内容和答案是否一样:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head> <body>
<form>
中华民国成立于那一年?<input type="text" daan="1912" id="t1" value=""
/>
<!--value:默认值 --><input type="button" onclick="check()" value="检查答案" />
</form>
</body>
</html>
<script>
function check()
{
var a=document.getElementById("t1");
var a1=a.value;<!--定义变量a1,获取输入的值 -->
var a2=a.getAttribute("daan");<!--获取属性 -->
if(a1==a2)
{
alert("恭喜你答对了!");
}
else
{
alert("笨蛋!");
}
} </script>
结果:
当输入正确答案时

输入错误答案时

例子2: 同意按钮,倒计时10秒,同意按钮变为可提交的,这里用了操作属性:disable,来改变按钮的状态,当disabled=”disabled”时按钮不可用。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
#b1{
width:80px;
height:30px;
} //设置按钮的属性
</style>
</head> <body> <form>
<input type="submit" id="b1" value="同意(9)" disabled="disabled" /> </form>
</body>
</html>
<script> var n=10;
var a=document.getElementById("b1");
function bian()
{
n--;
if(n==0)
{
a.removeAttribute("disabled");
a.value="同意";
return;
}
else
{
a.value="同意("+n+")";
window.setTimeout("bian()",1000);
} }
window.setTimeout("bian()",1000);
</script>



JavaScrip——DOM操作(属性操作)的更多相关文章
- JQuery处理DOM元素-属性操作
JQuery处理DOM元素-属性操作 //操作元素的属性: $('*').each(function(n){ this.id = this.tagName + n; }) //获取属性值: $('') ...
- jQuery 选择器 筛选器 样式操作 文本操作 属性操作 文档处理 事件 动画效果 插件 each、data、Ajax
jQuery jQuery介绍 1.jQuery是一个轻量级的.兼容多浏览器的JavaScript库. 2.jQuery使用户能够更方便地处理HTML Document.Events.实现动画效果.方 ...
- jQuery-介绍 加载 选择器 样式操作 属性操作 绑定click事件
jQuery - 介绍 加载 选择器 样式操作 属性操作 绑定click事件 注意:以下部分问题不能实现效果,因该是单词拼写错误(少个t)或者没有加引号(“swing”)... jquery介绍 jQ ...
- jquery 与javascript关系 ①取元素 ②操作内容 ③操作属性 ④操作 样式 ⑤ 事件 点击变色
jQuery的min版本和原版功能是一样的,min版主要应用于已经开发成的网页中,而非min版 的文件比较大,里面有整洁的代码书写规范和注释,主要应用于脚本开发过程当中. JQuery是继protot ...
- 2016/4/1 jquery 与javascript关系 ①取元素 ②操作内容 ③操作属性 ④操作 样式 ⑤ 事件 点击变色
jQuery的min版本和原版功能是一样的,min版主要应用于已经开发成的网页中,而非min版 的文件比较大,里面有整洁的代码书写规范和注释,主要应用于脚本开发过程当中. JQuery是继protot ...
- Dom样式操作-属性操作
1. 对样式进行操作: 1) 以样式(C1,C2等)为最小单位进行修改. className, classList, (以列表形式获得) classList.add("C2"), ...
- dom操作 属性操作 样式操作
jQuery DOM操作 1 插入子元素 append('<img>') 插后面 被插入元素调用 appendTo('<img scr="...">') 新 ...
- DOM模型-属性操作
HTML 元素包括标签名和若干个键值对,这个键值对就称为"属性"(attribute)."属性"本身是一个对象(Attr对象),但是实际上,这个对象极少使用.一 ...
- jQuery-对标签元素 文本操作-属性操作-文档的操作
一.对标签元素文本操作 1.1 对标签中内容的操作 // js var div1 = document.getElementById("div1"); div1.innerText ...
- jQuery总结02_jq的dom操作+属性操作
一:JQuery知识点 *:JQuery的dom操作 *:获取节点.给节点添加内容 *:动态创建dom节点 比如动态创建表格等,在js里面进行完成. *删除节点 这里面的删除就是将其放在了一个地方,并 ...
随机推荐
- js setAttribute removeAttribute
<input type="button" value="生效" style="font-size:111px"/> <sc ...
- C# 生成 DataMatrix 格式的二维码
该文主要是利用OnBarcode.dll 生成 DataMatrix 格式的二维码的一些简单方法和操作技巧.关于QrBarcode的二维码比较常见和简单,网上有很多资源. 1.附件为dll 2.利用上 ...
- cxf之org.xml.sax.SAXParseException; lineNumber: 7; columnNumber: 37; cvc-complex-type.2.4.c: 通配符的匹配很全面, 但无法找到元素 'jaxws:server' 的声明。
<?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.sp ...
- HDUOJ--畅通工程
畅通工程 Time Limit: 4000/2000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) Total Submi ...
- SQL SERVER SELECT语句中加锁选项的详细说明 [转]
SQL Server提供了强大而完备的锁机制来帮助实现数据库系统的并发性和高性能.用户既能使用SQL Server的缺省设置也可以在select 语句中使用“加锁选项”来实现预期的效果. 本文介绍了S ...
- TDR,阻抗匹配,反射,源端匹配,终端匹配
什么是阻抗 阻抗分三种,电阻.电容.电感,三者阻抗表达式如下: 符号 单位 表达式 备注 电阻 R 欧姆 Ω 电压电流相位相同 电容 C 法拉 F 电压相位落后电流90度 电感 L 亨利 H 电压相位 ...
- 修改oracle数据库的编码为utf-8
1.查看数据库字符集 ? 数据库服务器字符集select * from nls_database_parameters,其来源于props$,是表示数据库的字符集. 客户端字符集环境select * ...
- 谱聚类(Spectral clustering)(1):RatioCut
作者:桂. 时间:2017-04-13 19:14:48 链接:http://www.cnblogs.com/xingshansi/p/6702174.html 声明:本文大部分内容来自:刘建平Pi ...
- spineRuntTime for cocos2dx v3,attack播完后回到idle
spineRuntTime for cocos2dx v3,attack播完后回到idle. _animationNode = spine::SkeletonAnimation::createWith ...
- Redis(二):Redis的九大应用场景
毫无疑问,Redis开创了一种新的数据存储思路,使用Redis,我们不用在面对功能单调的数据库时,把精力放在如何把大象放进冰箱这样的问题上,而是利用Redis灵活多变的数据结构和数据操作,为不同的大象 ...