giovedì, luglio 20, 2006

standardise IE setAttribute (Part 2)

I go back to this subject because I've done some improvements to
the custom comment script that should Standardise IE 5.x setAttribute,
I create no other Object that could collide, look:


document.createElement = function(cE,interface){
//this is for DOM node not dinamically created
onload=function(){
var list=document.all;
var max=list.length;

while(--max)
{
list[max].getAttribute=interface.getAttribute;
list[max].setAttribute=interface.setAttribute;

}
//HTML node
list[0].getAttribute=interface.getAttribute;
list[0].setAttribute=interface.setAttribute;
}


return function (tagName) {
var element = cE(tagName);
element.getAttribute=interface.getAttribute;
element.setAttribute=interface.setAttribute;

return element;
}
}(document.createElement,{

getAttribute:function (attribute) {

switch(attribute){
case "class": attribute = "className";break;
case "for": attribute = "htmlFor";break;
case "style": return this.style.cssText;break;
case "type":return(this.id)?((document.getElementById)?document.getElementById(this.id):document.all[this.id]).type:this.type;break;
case "accesskey":return this.accessKey;break;
case "maxlength":return this.maxLength;break;
}
return this[attribute];
}

,setAttribute:function (attribute, value) {

switch(attribute){
case "name":return document.createElement(this.outerHTML.replace(/name=[a-zA-Z]+/," ").replace(">"," name="+value+">"));
case "class": attribute = "className";break;
case "for": attribute = "htmlFor";break;
case "type":
var me=this.parentNode;

if(!/id=/.test(this.outerHTML))
this.id=this.uniqueID;
if(me){
this.outerHTML=this.outerHTML.replace(/type=[a-zA-Z]+/," ").replace(">"," type="+value+">");




var t=me.childNodes;
var max=t.length;
for(var i=0;i<max;i++)
if(t[i].id==this.id){
t[i].getAttribute=this.getAttribute;
t[i].setAttribute=this.setAttribute;
}
}else this.type=value;

return;break;
case "accesskey":this.accessKey=value;return;break;
case "style": this.style.cssText =value;return;break;
case "maxlength":this.maxLength=value;return;break;
}

if(attribute.indexOf("on")==0){


this[attribute] = function(){eval(value)};

}
else
this[attribute] = value;
}
});


to use it just insert this line of code:

<!--[if lt IE 7]><script language="javascript" type="text/javascript" src="IEDOM.js"></script><![endif]-->

where IEDOM.js is the name of the script ..
Enjoy!


P.s. Look at http://www.devpro.it/JSL/ for a Great Library (
I would make a post for who don't want to Prototypize Object but won't use this great library!!
)

Update:
there are two known issues with this library:
first, if you use innerHTML instead of createElement you don't have the standard setAttribute,
so the solution is getting the node you are adding and extending the methods to each node it has

the second issue is the setAttribute("name") not updating dom. You was forced to return the correct node with setAttribute, so

var t=document.getElementById("x");
var n=t.setAttribute("name","usrname");
if(n)t=n;

now t is correct ;)

2 commenti:

Anonimo ha detto...

Great script :)
My dynamic JS stuff now works with IE thanks to your script.

Big thanks for this great script.

Sincerely Benjamin

Max Graham ha detto...

I applaud your effort! This is a nice script, however I have a few additions for you.

There are actually DOZENS of attributes that IE does not work with (see here)
http://webbugtrack.blogspot.com/2007/08/bug-242-setattribute-doesnt-always-work.html

Thanks,
Max