JavaScript中setAttribute用法详解

转载 2016年08月29日 00:04:39

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").onclick= 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" onclick="testaa()">aaa</a></div>
<div id="xxx"><a href="index.html#xmqw" id="Dnext" onclick="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>

setAttribute使用

setAttribute这个方法,在JSP内置对象session和request都有这个方法,这个方法作用就是保存数据,然后还可以用getAttribute方法来取出。 比如现在又个User对象,U...
  • u014782507
  • u014782507
  • 2015年11月24日 11:27
  • 2688

JavaScript DOM 中setAttribute()的使用 以及点击鼠标返回函数的处理

无标题文档 #demo{ position:absolute; top:210px; left:250px; } ul{ margin:0; padding-left:170px;...
  • ios0213
  • ios0213
  • 2016年05月18日 09:36
  • 827

QT中的setAttribute()用法

模态对话框就是指在子对话框弹出时,焦点被强行集中于该子对话框,子对话框不关闭,用户将无法操作其他的窗口。非模态相反,用户仍然可以操作其他的窗口,包括该子对话框的父对话框。如果从线程角度来讲,模态对话框...
  • qq_27312943
  • qq_27312943
  • 2016年03月15日 20:53
  • 4425

DOM自定义属性 getAttribute、setAttribute、removeAttribute

1、函数语法 elementNode.attributes:属性返回包含被选节点属性的 NamedNodeMap。 elementNode.getAttribute(name):方法通过名称获取属性的...
  • pan_junbiao
  • pan_junbiao
  • 2013年07月07日 11:57
  • 8094

setAttribute 和 getAttribute区别

² 赋值....setAttribute("a","1")    将1赋值给a ² 取值....getAttribute("a")  取出a的值,为1 在IE中是不认识class属性的,需改为cl...
  • pedrojuliet
  • pedrojuliet
  • 2016年11月13日 16:13
  • 1068

request.setAttribute的用法

request.getAttribute表示从request范围取得设置的属性,必须要先setAttribute设置属性,才能通过getAttribute来取得,设置与取得的为Object对象类型 。...
  • liuminchao83
  • liuminchao83
  • 2017年04月13日 09:19
  • 2367

setAttribute()方法

setAttribute()方法 增加一个指定名称和治的新属性,或者把一个现有属性设定为指定的值 elementNode.setAttribute(name,value) 说明: 1.name...
  • qq_24193261
  • qq_24193261
  • 2016年09月18日 14:51
  • 1677

request的setAttribute()怎么用的?

request.setAttribute()怎么用的?JSP1代码String [] test=new String[2];test[0]="1";test[1]="2";request.setAtt...
  • ammmd
  • ammmd
  • 2009年03月14日 20:29
  • 130559

使用.添加属性和使用setattribute的区别

div id="ht">HTML5div> span id="html4">HTML4span> script> var sp = document.getElementsByTagName("spa...
  • Academia_zhen
  • Academia_zhen
  • 2017年09月25日 10:40
  • 144

jsp中setAttribute,getAttribute和getParameter用法

 1.getAttribute是取得jsp中 用setAttribute設定的attribute值 2.getParameter()得到的是客户端传的String型参数,即POST/GET传递的参数值...
  • explorewen
  • explorewen
  • 2008年08月01日 13:30
  • 6971
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:JavaScript中setAttribute用法详解
举报原因:
原因补充:

(最多只允许输入30个字)