getStyle

kkapsner · 19. Jan. 2009

Hi Leute!

Hab' gerade ein Script gebaut, dass einem die aktuell gerenderten Styles einer Node zurückgibt - Syntax:

Code:

var node = document.getElementById("IRGENDWAS");
var t = kkjs.getStyle(node, ['color', 'borderLeft']);
alert(t.color); 
alert(t.borderLeft);
alert(kkjs.getStyle(node, 'background');

Es funktioniert auch, soweit ich es bis jetzt getestet habe, im FF3 und IE7.
Mein Hauptproblem ist, dass manche CSS-Eigenschaften in den entsprechenden Objekten nicht gespeichert werden und ich diese "per Hand" zusammensetzen muss (z.B. border). Jetzt ist die Frage:
1. Funktioniert das Skript auch in anderen Browsern
2. Hab' ich irgendeine CSS-Eigenschaft vergessen (ich weiß, dass ich da diese ganzen MozRoundCornerIrgendWasSeltsames nicht dabei habe, aber ich will v.A. die standardkonformen auf jeden Fall abdecken)

So jetzt endlich mal mein Code:

Code:

kkjs.getStyle = function getStyle(node, style, pseudo){
	if (kkjs.is.array(style)){
		var ret = new Object();
		for (var i = 0; i < style.length; i++){
			ret[style[i]] = kkjs.getStyle(node, style[i], pseudo);
		}
		return ret;
	}
	
	if (!pseudo) pseudo = "";
	var win = kkjs.getWindow(node);
	if (win.getComputedStyle) var currStyle = win.getComputedStyle(node, pseudo);
	else if (node.currentStyle) var currStyle = node.currentStyle;
	else return kkjs.Debug.error(1);
	
	if (!style) return currStyle;
	
	var style_ = style;
	if (style == "float"){
		if (currStyle.cssFloat) style = "cssFloat";
		else if (currStyle.styleFloat) style = "styleFloat";
		else kkjs.Debug.error("das Float-Attribut konnte nicht refernziert werden.");
	}
	if (/-/.test(style)){
		// nach http://www.robertnyman.com/2006/04/24/get-the-rendered-style-of-an-element/
		style = style.replace(/-([a-z])/g, function(match, hit){ return hit.toUpperCase();});
	}
	if (/[A-Z]/.test(style_)){
		style_ = style.replace(/([A-Z])/g, function(match, hit){return "-" + hit.toLowerCase();});
	}
	
	if (kkjs.is.key(currStyle, style) && currStyle[style] && currStyle[style].toString() != "") return currStyle[style];
	
	if (/^(border(Style|Width|Color)|padding|margin)$/.test(style)){
		var richt = new Array("Top", "Right", "Bottom", "Left");
		var post = "";
		if (/(style|width|color)/i.test(style)){
			post = RegExp.$1;
			style = "border";
		}
		var wert = new Array();
		for (var i = 0; i < richt.length; i++){
			wert[i] = currStyle[style + richt[i] + post];
		}
		for (var i = 0; i < wert.length - 1; i++){
			if (wert[i] != wert[i + 1]) break;
			if (i == wert.length - 2) return wert[i];
		}
		if (wert[1] == wert[3]){
			if (wert[0] == wert[2]) return wert[0] + " " + wert[1];
			else return wert[0] + " " + wert[1] + " " + wert[2];
		}
		
		return wert.join(" ");
	}
	if (/^border(Top|Right|Bottom|Left)$/.test(style)){
		var art = new Array("Width", "Style", "Color");
		var wert = new Array();
		for (var i = 0; i < art.length; i++){
			wert[i] = currStyle[style + art[i]];
		}
		return wert.join(" ");
	}
	if (style == "border"){
		var richt = new Array("Top", "Right", "Bottom", "Left");
		var wert = new Array();
		for (var i = 0; i < richt.length; i++){
			wert[i] = kkjs.getStyle(node, style + richt[i], pseudo);
			if (wert[i] != wert[0]) return "";
		}
		return wert[0];
	}
	if (style == "background"){
		var art = new Array("Color", "Image", "Repeat", "Attachment");
		if (currStyle.backgroundPosition) art.push("Position");
		else{
			art.push("PositionX");
			art.push("PositionY");
		}
		var wert = new Array();
		for (var i = 0; i < art.length; i++){
			wert[i] = currStyle[style + art[i]];
		}
		return wert.join(" ");
	}
	if (style == "backgroundPosition"){
		return currStyle.backgroundPositionX + " " + currStyle.backgroundPositionY;
	}
	if (style == "font"){
		var art = new Array("Style", "Variant", "Weight", "Size");
		var wert = new Array();
		for (var i = 0; i < art.length; i++){
			wert[i] = currStyle[style + art[i]];
		}
		
		return wert.join(" ") + "/" + currStyle.lineHeight + " " + currStyle.fontFamily;
	}
	if (style == "clip"){
		var richt = new Array("Top", "Right", "Bottom", "Left");
		var wert = new Array();
		for (var i = 0; i < richt.length; i++){
			wert[i] = kkjs.getStyle(node, style + richt[i], pseudo);
			if (wert[0] == "auto") return "auto";
		}
		return "rect(" + wert.join(" ") + ")";
	}
	
	return kkjs.Debug.error("Styleattribut (" + style + ") nicht gefunden.");
};

und die Hilfsfunktionen

Code:

kkjs.is = {
	array: function(obj){
		return (obj != null && (obj.constructor == Array || obj.constructor == kkjs.array));
	},
	object: function(obj){
		return (obj != null && (/^object$/i.test(typeof obj) || obj.constructor == Object));
	},
	number: function(num){
		return (!isNaN(num) && (/^number$/i.test(typeof num) || num.constructor == Number));
	},
	string: function(str){
		return (str != null && (/^string$/i.test(str) || str.constructor == String));
	},
	boolean: function(bool){
		return (bool != null && (/^boolean$/i.test(bool) || bool.constructor == Boolean));
	},
	'true': function(tr){
		return (kkjs.is.boolean(tr) && tr);
	},
	'false': function(fl){
		return (kkjs.is.boolean(fl) && !fl);
	},
	undefined: function(un){
		return (un == null || /^undefined$/i.test(typeof un));
	},
	'null': function(nu){
		return (nu == null);
	},
	key: function(array, key){
		if (key in array) return true;
		
		return !kkjs.is.undefined(array[key]);
	},
	node: function(node){
		return (kkjs.is.object(node) && ("nodeName" in node) && ("nodeType" in node) && ("nodeValue" in node));
	},
	opera: /opera/i.test(navigator.userAgent),
	ie: (/msie/i.test(navigator.userAgent) && !/opera/i.test(navigator.userAgent)),
	ie7: (/msie/i.test(navigator.userAgent) && /msie\s+7/i.test(navigator.appVersion)),
	gecko: /gecko/i.test(navigator.userAgent),
	ff: /firefox/i.test(navigator.userAgent)
};


String.prototype.firstToUpperCase = function(restToLowerCase){
	var str = this;
	if (restToLowerCase) str = this.toLowerCase();
	return str.substring(0,1).toUpperCase()+str.substring(1,this.length);
}


kkjs.getDocument = function getDocument(node){
	if (!node) return document;
	if (!node.nodeType){
		if (node.document){
			return node.document;
		}
		else{
			return document;
		}
	}
	if (node.nodeType == 9) return node;
	if (node.ownerDocument) return node.ownerDocument;
	if (node.document) return node.document;
	while(node.nodeType != 9){
		if (!node.parentNode) break;
		node = node.parentNode;
	}
	if (node.nodeType != 9) return document;
	return node;
}

kkjs.getWindow = function getWindow(node){
	if (!node) return window;
	var doc = kkjs.getDocument(node);
	if (doc.parentWindow) return doc.parentWindow;
	if (doc.defaultView) return doc.defaultView;
	
	kkjs.Debug.alert("getWindow() -> Fehler: Ihr Browser unterstützt diese Funktion nicht.");
	return false;
};


kkjs.Debug = {
	status : true,
	
	getElements : function(obj,re, wre){
		if (!re){ re = /./;}
		if (!wre){ wre = /.*/;}
		
		var name = "[object]";
		if (isNotDefined(obj)) name = "undefined";
		else if (obj.toString) name = obj.toString();
		
		if (name.length > 50) {name = name.substring(0,50) + " ...";}
		
		var text = "Elemente von " + name + " :\n";
		for(var i in obj){
			if (re.test(i) && wre.test(obj[i])){
				try{
					text += i + ": " + obj[i] + "\n";
				}
				catch(e){
					text += i + ": nicht anzeigbar\n";
				}
			}
		}
		return text;
	},
	
	alert : function(str){
		if (this.status){
			if (/\n/.test(str)){
				alert(str);
			}
			else{
				window.status = "Bereit";
				if (window.status == "Bereit"){
					window.status = str;
				}
				else{
					alert(str);
				}
			}
			return true;
		}
		else {
			window.status = "Debug.alert(" + str + ")";
		}
		return false;
	},
	
	elementAlert : function(obj,re, wre){
		return this.alert(this.getElements(obj,re, wre));
	},
	
	errorList : new Array("Unbekannter Fehler", "Ihr Browser unterstützt diese Funktion nicht."),
	
	error : function(errorNumber){
		var name = Debug.error.caller.toString().match(/function\s+([^\(\)]+)\(/)[1];
		
		if (typeof(errorNumber) == "string") errorString = name + "() -> Fehler: " + errorNumber;
		else {
			if (!errorNumber || typeof(errorNumber) != "number" || errorNumber >= this.errorList.length) errorNumber = 0;
			errorString = name + "() -> Fehler: " + this.errorList[errorNumber];
		}
		this.alert(errorString);
		return;
	},
	
	insertDebugConsole : function(){
		if ($("DebugConsole")) return;
		Debug.status = true;
		
		var console = document.createElement("div");
		cancelAllBubble(console, "key+mouse");
		
		console.id = "DebugConsole";
		console.style.position = "fixed";
		console.style.bottom = "0px";
		console.style.left = "0px";
		console.style.width = "100%";
		console.style.backgroundColor = "buttonface";
		console.style.padding = "0px 5px 5px 5px";
		document.body.appendChild(console);
		
		var link = createNode("div", {innerHTML: "Debug Console", onclick: function(){
			document.body.style.paddingBottom = nummer(document.body.style.paddingBottom) - this.parentNode.offsetHeight + "px";
			toggle(this.nextSibling);
			toggle(this);
			document.body.style.paddingBottom = nummer(document.body.style.paddingBottom) + this.parentNode.offsetHeight + "px";
			}}, {textAlign: "center", cursor: "pointer", fontSize: "8pt", color: "#777777"});
		console.appendChild(link);
		
		var tab = tabelle(3, 4);
		console.appendChild(tab[0]);
		
		tab[0].style.width = "100%";
		tab[0].style.display = "none";
		tab[2][0].style.width = "100%";
		tab[2][1].style.whiteSpace = "noWrap";
		tab[3][1].style.whiteSpace = "noWrap";
		tab[2][2].style.width = "100%";
		tab[0].style.paddingRight = "6px";
		
		tab[1][2].innerHTML = "Debug Console (kkjs ver. 1.0)";
		tab[1][2].style.cssText = "text-align: center; color: #777777; font-size: 10pt; font-family: Times New Roman; font-style: italic;";
		
		var schliessen = createCloseButton(function(ev, node){
			document.body.style.paddingBottom = nummer(document.body.style.paddingBottom) - node.link.parentNode.offsetHeight + "px";
			toggle(node.link);
			toggle(getParentNodeByTagName(node, "table"));
			document.body.style.paddingBottom = nummer(document.body.style.paddingBottom) + node.link.parentNode.offsetHeight + "px";
		});
		cancelAllBubble(schliessen, "mouse");
		schliessen.link = link;
		schliessen.style.position = "static";
		tab[0].x = schliessen;
		tab[1][4].style.direction = "rtl";
		tab[1][4].style.paddingTop = tab[1][4].style.paddingBottom = "2px";
		tab[1][4].appendChild(schliessen);
		tab[1][0].style.cursor = "pointer";
		setzeEvent(tab[1][0], "click", function(ev, node){fireEvent(getParentNodeByTagName(node, "table").x, "mouseup");});
		
		tab[2][1].appendChild(document.createTextNode("Befehl: "));
		var cmdFeld = document.createElement("input");
		cmdFeld.style.width = "98%";
		cmdFeld.onkeypress = function(event){
			if (!event) event = window.event;
			if (event.keyCode == 13){
				this.button.click();
			}
		};
		tab[2][2].appendChild(cmdFeld);
		var cmdButton = document.createElement("input");
		cmdButton.type = "button";
		cmdButton.value = "ausf" + String.fromCharCode(252) + "hren";
		cmdButton.feld = cmdFeld;
		cmdFeld.button = cmdButton;
		cmdButton.onclick = function (){
			try{
				eval(this.feld.value);
			}
			catch(e){
				Debug.elementAlert(e);
			}
		}
		tab[2][3].appendChild(cmdButton);
		
		var DOMButton = document.createElement("input");
		DOMButton.type = "button";
		DOMButton.value = "DOM";
		DOMButton.title = "DOM Inspektor initialisieren";
		DOMButton.onclick = Debug.makeDOMInspector;
		tab[2][4].appendChild(DOMButton);
		
		tab[3][1].appendChild(document.createTextNode("zu lesende Instanz: "));
		
		var readFeld = document.createElement("input");
		readFeld.style.width = "98%";
		readFeld.onkeypress = function(event){
			if (!event) event = window.event;
			if (event.keyCode == 13){
				this.button.click();
			}
		};
		tab[3][2].appendChild(readFeld);
		var readButton = document.createElement("input");
		readButton.type = "button";
		readButton.value = "lesen";
		readButton.feld = readFeld;
		readFeld.button = readButton;
		readButton.onclick = function (){
			try{
				var node = eval(this.feld.value);
				if (typeof(node) == "string") alert(node);
				else Debug.elementAlert(node);
			}
			catch(e){
				Debug.elementAlert(e);
			}
		}
		tab[3][3].appendChild(readButton);
		
		document.body.style.paddingBottom = nummer(document.body.style.paddingBottom) + console.offsetHeight + "px";
		return;
	},
	
	makeDOMInspector : function(){
		var DOM = window.open("about:blank","_blank");
		
		Debug.DOM = DOM;
		
		DOM.document.open();
		DOM.document.write('<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="content-type" content="text/html; charset=UTF-8" /><link rel=stylesheet type="text/css" href="' + plugin_url +'nuetzlich/DOM_Inspector.css" /><script type="text/javascript" src="' + plugin_url + 'nuetzlich.js?plugin=nuetzlich/DOM_Inspector"></script></head><body><table style="table-layout: fixed;width:100%; height : 100%; border: black 1px solid;"><tr style="vertical-align: top;"><td><input type="button" value="baum aktualisieren" onclick="baumAktualisieren();"</td><td><a id="ort"> </a><br />Schlüssel Filter: <input id="key_filter" title="Schlüssel Filter" onchange="search();" onkeyup="search();"/><br />Element enthalten?:<input id="hasAttrib"  onchange="testElement(this.value, true);" onkeyup="testElement(this.value, true);" /><input type="button" value="ansehen" onclick="gefundenesElementAnsehen()" /><br />Wert Filter: <input id="wert_filter" title="Wert Filter" onchange="search();" onkeyup="search();"/></td></tr><tr><td id="baum"></td><td id="details"> </td></tr></table></body></html>')
		DOM.document.close();
	}
}

Hoffe, ich hab' nichts vergessen.

Danke für's anschauen.

getStyle

kkapsner

Super Moderator