【第22期】观点:IT 行业加班,到底有没有价值?

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>

举报

相关文章推荐

js中 javascript:void(0) 用法详解

void(0)用于执行某些处理,但是不整体刷新页面的情况下,下面小编就给大家详细介绍js中 javascript:void(0)的含义 ,需要的朋友可以参考下 javascript:void(0)...

javascript_正则表达式_\b用法详解

&lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt; &lt;HEAD&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8"&gt; &lt

JavaScript中setAttribute用法总结

我们经常需要在JavaScript中给Element动态添加各种属性,这可以通过使用setAttribute()来实现,这就涉及到了浏览器的兼容性问题。 setAttribute(string na...

JavaScript中setAttribute用法

我们经常需要在JavaScript中给Element动态添加各种属性,这可以通过使用setAttribute()来实现,这就涉及到了浏览器的兼容性问题。 setAttribute(string name, string value):增加一个指定名称和值的新属性,或者把一个现有的属性设定为指定的值。</p

javascript 继承与原型继承用法详解

javascript 继承与原型继承用法详解 本文章来给大家总结一下在javascript 继承与原型继承用法,有需要了解继承与原型继承用法的朋友可进入参考参考JavaScript是基于...

Javascript中的数组用法详解

         数组就是由许多名称相同的变量聚集在一起,数组的用法和普通变量是完全一样的,它也可以存入任何数据类型,唯一的不同点是它在内存中占据的是一块连续的空间,您可以依序给它们编号,再依编号来使用它们。数组的好处在于它可以一次声明和使用多个变量。JAVAScript数组的使用方法和VBScript有所不同,使用的时候要用中括号“[]”括起来,不同的变量中间用逗号“,”隔开。 var 数组名;数组名 = [1,.....,n]; 例:我要定义一个数组“fruit”,它要包含三种水果“西瓜”、“苹果”、“香蕉”,我们就要这样写:

【QT】QML中的JavaScript用法详解

熟悉JavaScript的应该都了解Netscape公司,一代骄子虽然倒下了,却给后人留下了最为珍贵的产品和经验,在互联网发展史上享有举足轻重的地位,这里就不讲故事了,虽然很精彩,从未被磨灭。QML是...

javascript的 this 详解以及apply与call的用法意义及区别

[b][color=red]JAVASCRIPT THIS详解[/color][/b]:[url]http://www.cnblogs.com/felix2007/archive/2007/03/21/682670.html[/url] [color=red][b]你不知道的 JavaScript - “this”[/b][/color]:[url]http://www.cnblogs.com/ruxpinsp1/archive/2008/04/20/1162463.html[/url] [color=red][b]关于JavaScript中apply与call的用法意义及区别[/b][/

JavaScript中this的用法详解

2使用this的意义     那为什么这里使用 this 而不是直接使用odiv呢?因为在实例化对象时,总是不能确定开发者会使用什么样的变量名。使用 this,即可在任何多个地方重用同一个函...

Session详解

一、什么是session 在我的经验里,session这个词被滥用的程度大概仅次于transaction,更加有趣的是transaction与session在某些语境下的含义是相同的。 session,中文经常翻译为会
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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