Javascript/js scripting HTML element custom attribute resolution (pro-Test compatible Firefox and IE) _javascript tips

HTML element, the properties are already very rich. However, in some situations, it also appears to be stretched, when the custom attributes play a very important role.

Custom attributes for HTML elements that are convenient to use, such as:

<input type= "button" value= "click Me, baby!"/>

Let's say we need a limit now, this button can only be clicked 2 times, and then it will fail.

The usual implementation is to use the form of global variables to record the number of clicks, but here we use custom attributes to achieve this function, show the advantages of the custom attributes; let's do a makeover on the button above:

<input type= "button" value= "click Me, baby!" clickcount= "0"/>

As you can see, I've added a custom attribute clickcount to this button and set the initial value to 0; Here we write the JS code to implement the function:

1. Increase the Click event Handling to the button

<input type= "button" value= "click Me, baby!" clickcount= "0" onclick= "Customattributedemo (this);"/>

2. Let's write the Customattributedemo (obj) function

For IE, the use of custom attributes is very simple, because IE automatically resolves the custom attribute to the DOM, and the standard properties are not any different, ie version:

Copy Code code as follows:

function Customattributedemo (obj)
{
if (Obj.clickcount = = ' 0 ')
{
Obj.clickcount = ' 1 ';
}
Else
{
Obj.disabled = true;
}
}

The above code will fail under Firefox because Firefox has a higher limit on the use of custom attributes and can only access it using the attributes[] collection, Firefox code:

Copy Code code as follows:

function Customattributedemo (obj)
{
if (obj.attributes[' clickcount '].nodevalue = = ' 0 ')
{
obj.attributes[' clickcount '].nodevalue = ' 1 ';
}
Else
{
Obj.disabled = true;
}
}

The above code, also applies to IE, so, this code, is compatible with the code.

Thanks to the exchange of friends, he gave the GetAttribute and SetAttribute methods:

Copy Code code as follows:

function Customattributedemo (obj)
{
if (Obj.getattribute (' clickcount ') = = ' 0 ')
Obj.setattribute (' Clickcount ', ' 1 ');
Else
Obj.disabled = true;
}