JavaScript中setAttribute用法详解
setAttribute基本用法
element.setAttribute(attributename,attributevalue)
setAttribute() 方法添加指定的属性,并为其赋指定的值,看到w3c的例子
document.getElementsByTagName("INPUT")[0].setAttribute("type","button");
我们经常需要在JavaScript中给Element动态添加各种属性,这可以通过使用setAttribute()来实现,这就涉及到了浏览器的兼容性问题。
var bar = document.getElementById("foo");
bar.setAttribute("onclick", "javascript:alert('This is a test!');");
这里利用setAttribute指定e的onclick属性,简单,很好理解。但是IE不支持,IE并不是不支持setAttribute这个函数,
而是不支持用setAttribute设置某些属性,例如对象属性、集合属性、事件属性,也就是说用setAttribute设置style和onclick这些属性
在IE中是行不通的。为达到兼容各种浏览器的效果,可以用点符号法来设置Element的对象属性、集合属性和事件属性。
程序代码
document.getElementById("foo").className = "fruit";
document.getElementById("foo").style.cssText = "color: #00f;";
document.getElementById("foo").style.color = "#00f";
document.getElementById("foo").οnclick= function () { alert("This is a test!"); }
例子
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<script language="JavaScript">
function change() {
var input = document.getElementById("li1");
alert(input.getAttribute("title"));
input.setAttribute("title", "mgc");
alert(input.getAttribute("title"));
}
</script>
</head>
<body>
<ul id="u">
<li id="li1" title="hello">Magci</li>
<li>J2EE</li>
<li>Haha!</li>
</ul>
<input type="button" value="Change" onClick="change();" />
</body>
</html>
例子,一个企业网站用到的就是当我们点击时自动给href重新赋值然后点击有值了
<!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" />
</head>
<body>
<div id="xxx"><a href="index.html#home" id="Dpre" οnclick="testaa()">aaa</a></div>
<div id="xxx"><a href="index.html#xmqw" id="Dnext" οnclick="testaa()">aaabb</a></div>
<script language="javascript">
function testaa()
{
var url = window.location.href;
var array = url.split("#");
if(array[1]==undefined)
{
array[1] ='home';
}
//Dpre 父级
//Dnext 子级
switch(array[1])
{
case 'home':
getid('Dpre').setAttribute('href','index.html#home');
getid('Dnext').setAttribute('href','index.html#xmqw');
break;
case 'xmqw':
getid('Dpre').setAttribute('href','index.html#home');
getid('Dnext').setAttribute('href','index.html#sspj');
break;
case 'sspj':
getid('Dpre').setAttribute('href','index.html#xmqw');
getid('Dnext').setAttribute('href','index.html#cpjd');
break;
case 'cpjd':
getid('Dpre').setAttribute('href','index.html#sspj');
getid('Dnext').setAttribute('href','index.html#zyzx');
break;
case 'zyzx':
getid('Dpre').setAttribute('href','index.html#cpjd');
getid('Dnext').setAttribute('href','index.html#zxdt');
break;
case 'zxdt':
getid('Dpre').setAttribute('href','index.html#zyzx');
getid('Dnext').setAttribute('href','index.html#hrzy');
break;
case 'hrzy':
getid('Dpre').setAttribute('href','index.html#zxdt');
getid('Dnext').setAttribute('href','index.html#home');
break;
}
}
function abc()
{
alert(0);
}
function getid(id)
{
return document.getElementById(id);
}
//alert(getid('xxx'));
</script>
</body>
</html>
JavaScript中setAttribute用法详解相关推荐
- js中setAttribute用法详解
jssetAttribute基本用法 element.setAttribute(attributename,attributevalue) setAttribute() 方法添加指定的属性,并为其赋指 ...
- html语言 input,input标签(HTML中input用法详解)
input标签 Firstname: Lastname: HTML中input用法详解 1.type 格式:type="文本的类型" 当type设置为text时,text属性表示一 ...
- JavaScript中getBoundingClientRect()方法详解
JavaScript中getBoundingClientRect()方法详解 getBoundingClientRect() 这个方法返回一个矩形对象,包含四个属性:left.top.right和bo ...
- pdo mysql limit_PHP mysql中limit用法详解(代码示例)
在MySQL中,LIMIT子句与SELECT语句一起使用,以限制结果集中的行数.LIMIT子句接受一个或两个offset和count的参数.这两个参数的值都可以是零或正整数. offset:用于指定要 ...
- JavaScript中的this详解
前 言 this JavaScript中的this详解 this详解 This的指向有几种情况?如何人为控制? [谁调用this,this指向谁!!] [this的指向,不关心this写在哪 ...
- php 配置 error_reporting,PHP中error_reporting()用法详解 技术分享
在php中error_reporting函数有什么作用? error_reporting([ int $level ] ) - 设置应该报告何种 PHP 错误. 该函数能够在运行时设置 error_r ...
- mysql increment_mysql中auto_increment用法详解
在mysql中AUTO_INCREMENT类型的属性用于为一个表中记录自动生成ID功能,也就是会自动自增一个ID了,如现在是1下次会自动是2了,就这么简单,下面来看mysql中auto_increme ...
- 【 Python 中 int 用法详解】(转载)
Python 中 int 用法详解 欢迎转载,转载请注明出处! 文章目录 Python 中 int 用法详解 0. 参考资料 1. int 的无参数调用 2. int 接收数字作为参数 3. int ...
- Python 中 int 用法详解
Python 中 int 用法详解 欢迎转载,转载请注明出处! 文章目录 Python 中 int 用法详解 0. 参考资料 1. int 的无参数调用 2. int 接收数字作为参数 3. int ...
最新文章
- windows上搭建python+gvim开发环境
- luogu 3796 【模板】AC自动机(加强版)
- NumPy之:数据类型
- Spark 101:它是什么,它做什么以及为什么起作用
- C++基础知识(一)—— C++程序结构
- oracle logical standby,Oracle Dataguard管理命令(logical standby)
- 【BZOJ1922】【Tyvj1736】【codevs2129】大陆争霸,无语最短路
- 码云git上传下载代码
- 嵌入式系统那些事—脚本语言tcl
- 测试工具学习——JMeter
- 猿辅导python大纲_解读独角兽企业“猿辅导”(一)
- topgate镜像_[百度云盘]1678个PS1美版镜像(redump20110912)
- IEEEE trans模板中怎么使用algorithm2e
- vnc远程软件,四款值得使用的vnc远程软件推荐
- 【Jekyll】使用GitHub Pages + Jekyll搭建自己的技术博客,Jekyll服务器的搭建
- 应用架构COLA 2.0
- [控制原理基础]浅谈PID算法
- Python08--文件读取及写入操作
- 目标是100个百亿级大客户,赛意信息为何如此有底气?
- 06C++运算符重载