• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

getStyle

kkapsner

kkapsner

Super Moderator
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.
 
Zuletzt bearbeitet:
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben