jex: IE kennt 'object'-Objekt nicht?!

Hi Leute,

ich bin gerade dabei mir ein kleines JS-Framework zu schreiben.
Nun habe ich aber ein kleines Problem, der IE spielt mal wieder nicht mit.
Er kann die folgende Methode 'css' nicht benutzen.
Laut Fehlermeldung hat das Objekt nicht diese Methode oder Eigenschaft, obwohl ich sie mit 'Object.prototype.css' zugewiesen haben müsste.

Hier meine Mark-Up:

  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
	<head>  
		<title></title>  
	</head>  
	<body>  
		<div name="peter">Hello, my name is Peter</div>  
		<div id="hans">Hello, my id is Hans</div>  
		<span>Hello, I am a span</span>  
		<textarea id="output">  
			nothing has changed  
		</textarea>  
		<script type="text/javascript" src="exscript-beta-0.1.js"></script>  
	</body>  
</html>  
  

Und jetzt der JS-Teil:

  
  
//***STRING***//  
  
String.prototype.strpart = function (start, end) {  
	if (start < 0) {  
		start = this.length + start;  
	}  
	  
	if (end < 0) {  
		end = this.length + end;  
	}  
	  
	if (end) {  
		return this.substring(start, end);  
	} else  {  
		return this.substring(start);  
	}  
};  
  
//***ELEMENTS***//  
  
function $(el) {  
	if(el.strpart(0,1)=='<') {  
	  
		if (el.strpart(-2)=='/>') {  
			return document.getElementsByTagName(el.strpart(1,-2));  
		} else if (el.strpart(-1)=='>') {  
			return document.getElementsByTagName(el.strpart(1,-1));  
		} else {  
			return document.getElementsByTagName(el.strpart(1));  
		}  
			  
	} else if (el.strpart(0,1)=='#'){  
		return document.getElementById(el.strpart(1));  
	} else {  
		return document.getElementsByName(el);  
	}  
}  
  
//***CSS***//  
  
Object.prototype.css = function (property, v) {  
	var before = this.getAttribute('style');  
	if (before) {  
		if (this.getAttribute('style').strpart(-1)!=';') {  
			before = before+';';  
		}  
	} else {  
		before = '';  
	}  
	  
	this.setAttribute('style', before+property+':'+v+';');  
}  
  
var el = 'peter!und?luise';  
$('#output').innerHTML = el.strpart(-5);  
  
$('#hans').css('color', 'red');  
$('#hans').css('border', '1px solid yellow');  

  1. Hi,

    Nun habe ich aber ein kleines Problem, der IE spielt mal wieder nicht mit.
    Er kann die folgende Methode 'css' nicht benutzen.
    Laut Fehlermeldung hat das Objekt nicht diese Methode oder Eigenschaft, obwohl ich sie mit 'Object.prototype.css' zugewiesen haben müsste.

    Du willst darüber also auf das style-Objekt unterhalb von HTML-Element-Objekten zugreifen.
    Dazu solltest du nicht das generelle Object erweitern, sondern eher HTMLElement.prototype - aber leider unterstützt der IE das auch nicht.

    $('#hans').css('color', 'red');

    Das Objekt, dass du hier mit $ ermittelst, dürfte wohl "zu speziell" sein - es stellt für den IE kein allgemeines Object dar, sondern etwas anderes.

    MfG ChrisB

    --
    Light travels faster than sound - that's why most people appear bright until you hear them speak.
    1. Also ist es garnicht möglich?!(im IE - ich hasse ihn -.-)

    2. Dazu solltest du nicht das generelle Object erweitern, sondern eher HTMLElement.prototype - aber leider unterstützt der IE das auch nicht.

      Jein. Der IE 8 unterstützt den Konstruktor »Element« und dieser ist prototypisch erweiterbar.

      Mathias

  2. Object.prototype.css = function (property, v) {

    »Object.prototype ist verboten!« lautet eine Grundregel. Damit handelst du dir in 99% der Fälle Probleme ein, weil Object bei allen JavaScript-Objekten in der Prototype-Chain drinhängt.

    Wie gesagt könntest du HTMLElement bzw. Element erweitern, was aber nicht abwärtskompatibel ist. Von der prototypischen Erweiterung von Elementobjekten haben daher alle großen Frameworks Abstand genommen. Sie gehen einen dieser zwei Wege:

    • Methoden an das ausgewählte Elementobjekt kopieren, wenn man es mit $ auswählt
    • Eine Facade (»Fassade«) implementieren, die das Elementobjekt selbst umschließt (Wrapper-Objekt) und alle Methoden und Eigenschaftszugriffe re-implementiert und ggf. »durchreicht«

    Das zweite Prinzip beschreibt dieser Artikel ganz gut:
    http://www.dustindiaz.com/roll-out-your-own-interface/
    Hier wird ein privater Array mit den Elementen gespeichert, auf dem alle Methoden operieren.

    Mathias