molily: HTML-Elementobjekte um Methoden/Eigenschaften erweitern

Beitrag lesen

Allerdings kannst du dir von denen keinerlei zusätzliche Funktionalität erwarten. Setzen/Abfragen ist aber problemlos möglich.

Es gibt Getter und Setter in allen Browsern. Im IE mit ECMAScript-5-konformer Syntax, in den restlichen mit einer proprietären (__defineGetter__ und __defineSetter__).

Allerdings kann es der IE bei HTML-Elementobjekten m.W. immer noch nicht.

IE kann es ab Version 8 Beta 2 von August 2008.

http://msdn.microsoft.com/es-es/library/dd282900(VS.85).aspx
http://msdn.microsoft.com/en-us/library/dd229916(VS.85).aspx
http://msdn.microsoft.com/en-us/library/dd347057(VS.85).aspx
http://msdn.microsoft.com/en-us/ie/dd578303.aspx

Browserübergreifendes Beispiel:

<div id="foo">Some text</div>  
  
<script>  
  
[code lang=javascript](function (global) {  
	  
	function extendElement (property, getter, setter) {  
		var prototype = (global.HTMLElement || global.Element).prototype;  
		if (Object.defineProperty) {  
			Object.defineProperty(prototype, property, { get : getter, set : setter });  
		} else if (prototype.__defineGetter__ && prototype.__defineSetter__) {  
			prototype.__defineGetter__(property, getter);  
			prototype.__defineSetter__(property, setter);  
		} else {  
			throw "Getter and setter not supported";  
		}  
	}  
	  
	extendElement("mllyRed", function () {  
		return (this.currentStyle || global.getComputedStyle(this, null)).color;  
	}, function (value) {  
		this.style.color = value;  
	});  
	  
	var zeFoo = global.document.getElementById("foo");  
	alert(zeFoo.mllyRed);  
	zeFoo.mllyRed = "blue";  
	  
})(window);

</script>[/code]

Funktioniert in allen aktuellen Browsern (Firefox 3.6, Safari 4, IE 8, Chrome 4, Opera 10.10)