SetAttribute usage in JavaScript

Source: Internet
Author: User

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.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.