Home > Developer > JavaScript
Basic usage of setattribute
Element.setattribute (Attributename,attributevalue)
The setattribute () method adds the specified property and assigns the specified value to the example
document.getElementsByTagName ("INPUT") [0].setattribute ("Type", "button");
We often need to add various properties to the element dynamically in JavaScript, which can be achieved by using setattribute (), which involves browser compatibility issues.
var bar = document.getElementById ("foo");
Bar.setattribute ("onclick", "Javascript:alert (' a test! ');");
Here, using setattribute to specify the onclick properties of E, simple, very good understanding. But IE does not support, IE does not support setattribute this function,
Instead of using setattribute to set certain properties, such as Object properties, collection properties, event properties, that is, use setattribute to set style and onclick properties
In IE is not feasible. To achieve compatibility with various browsers, you can set the element's object properties, collection properties, and event properties by using the dot notation method.
Program code
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!");}
Example
<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01//en" "HTTP://WWW.W3.ORG/TR/HTML4/STRICT.DTD" >
<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>
<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>
Example , a corporate web site is used when we click to automatically reassign the href and click on the value.
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<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-Parent
Dnext-Child
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>
Okay, here's a little compilation for JS SetAttribute.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
