JavaScript中setAttribute用法詳解

阿新 • • 發佈：2019-01-21

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>

JavaScript中setAttribute用法詳解

JavaScript中setAttribute用法詳解

javascript中replace()用法詳解

【JavaScript中的this詳解】

JavaScript中getBoundingClientRect()方法詳解

Python中enumerate用法詳解

C#中const用法詳解

C#中protected用法詳解

javascript中new關鍵字詳解

Java中SimpleDateFormat用法詳解

Java二進位制中0用法詳解

Spring中@Async用法詳解及簡單例項

STL中map用法詳解

C++中的STL中map用法詳解

Elasticsearch——Date Math在索引中的用法詳解

java中ArrayList用法詳解，基本用法（含增刪改查）

C++中set用法詳解

switch語句中default用法詳解

Python中global用法詳解

javascript中call方法詳解

C++中list用法詳解

JavaScript中setAttribute用法詳解

相關推薦