Autor |
Nachricht |
droptix
Threadersteller
Dabei seit: 21.04.2006
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Fr 21.04.2006 17:58
Titel CSS mit JS auslesen: getElementById |
|
|
Ich bin heut fast verzweifelt. Ich habe meine HTML-Website wie üblich geteilt in eine .html, dazu ausgelagerte .css und .js Dateien. In der .html stehen eigentlich nur <div>'s und statische Angaben. Gestyled werden sie über die ausgelagerten .css Dateien.
Nun wollte ich per JavaScript meine CSS-Eigenschaften auslesen. Verkürzt gesagt:
Code: | <html>
<head>
<title>read CSS with JS</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
<script type="text/javascript">
function getStyle() {
style = document.getElementById('lorem').style.backgroundColor;
alert(style);
}
</script>
</head>
<body onload="getStyle()">
<div id="lorem">Lorem ipsum</div>
</body>
</html> |
Die .css könnte z.B. so aussehen:
Code: | #lorem { background-color:#ccc; } |
Und nun der Clou: JavaScript kann die CSS-Eigenschaften nicht lesen, wenn sie in einer externen Datei ausgelagert wurden. Wenn man sie mit einem <div id="lorem" style="background-color:#ccc;"> direkt in den HTML-Quelltext reinschreibt, dann geht's. Aber das macht man ja eher selten, ich zumindest nicht.
Frage: Wie kann ich die CSS-Eigenschaften aus der externen .css Datei auslesen?
Zuletzt bearbeitet von droptix am Fr 21.04.2006 18:00, insgesamt 2-mal bearbeitet
|
|
|
|
|
dastef
Dabei seit: 03.11.2003
Ort: -
Alter: -
Geschlecht:
|
Verfasst Fr 21.04.2006 18:05
Titel
|
|
|
ich würde spontan sagen: gar nich .. dadurch, dass die css-
definitionen gehören sie fürs dom nicht zum element.
~ edit ~
ok, wieder was dazu gelernt .. gleich mal gebookmarked und
analysiert. kann man sicher mal brauchen .. dankö
Zuletzt bearbeitet von dastef am Fr 21.04.2006 20:31, insgesamt 1-mal bearbeitet
|
|
|
|
|
Anzeige
|
|
|
possmann
Dabei seit: 18.04.2006
Ort: -
Alter: -
Geschlecht: -
|
|
|
|
|
Raumwurm
Dabei seit: 21.12.2004
Ort: -
Alter: -
Geschlecht:
|
Verfasst Fr 21.04.2006 19:21
Titel
|
|
|
oder so:
Code: | <script type="text/javascript">
function getStyle() {
var Farbe;
if(window.getComputedStyle) {
Farbe= window.getComputedStyle(document.getElementById("lorem"),"").getPropertyValue("background-color");
} else if(document.getElementById("lorem").currentStyle) {
Farbe= document.getElementById("lorem").currentStyle.backgroundColor;
} else if(document.ids) {
Farbe= document.layers["lorem"].bgColor;
} else if(document.all) {
Farbe= document.all.lorem.style.backgroundColor; }
alert(Farbe);
}
</script> |
|
|
|
|
|
Cybaer
Dabei seit: 08.06.2006
Ort: Heidelberg
Alter: -
Geschlecht:
|
Verfasst Do 08.06.2006 09:47
Titel Re: CSS mit JS auslesen: getElementById |
|
|
droptix hat geschrieben: | Code: | #lorem { background-color:#ccc; } |
Frage: Wie kann ich die CSS-Eigenschaften aus der externen .css Datei auslesen? |
Mit Coding: CSS-Regeln auslesen & ändern.
Damit könnte das dann so aussehen:
Code: | if(cssRule()) {
alert("ID 'lorem' CSS-Regel: "+cssRule("#lorem"));
alert("ID 'lorem' background-color: "+cssRule("#lorem","background-color"));
} else {
alert("Browser zu alt!");
} |
Man kann auch Styles gezielt für einzelne Medien auslesen oder schreiben (z.B. cssRule("#lorem@handheld","background-color") für diese Regel in einem PDA-Stylesheet).
|
|
|
|
|
213db
Dabei seit: 20.09.2005
Ort: -
Alter: -
Geschlecht:
|
Verfasst Do 08.06.2006 12:10
Titel
|
|
|
Darf ich mal ganz unwissend fragen,welchen praktischen Nutzen das
Auslesen von CSS-Eigenschaften über JS in diesem Fall hat?
|
|
|
|
|
Cybaer
Dabei seit: 08.06.2006
Ort: Heidelberg
Alter: -
Geschlecht:
|
Verfasst Do 08.06.2006 13:57
Titel
|
|
|
213db hat geschrieben: | Darf ich mal ganz unwissend fragen,welchen praktischen Nutzen das
Auslesen von CSS-Eigenschaften über JS in diesem Fall hat? | In welchem? In einem Funktional-Beispiel?
Prinzipiell: Man weiß, welcher Stil aktuell ist, obwohl es sich nicht um einen Inline- oder per JS gesetzen Style handelt (die kann man auch anders auslesen) - und entsprechend reagieren (interaktives DHTML läßt grüßen).
Interessanter ist dann natürlich das Setzen eines neuen Stils oder einer neuen Regel (wofür es wiederum ggf. sinnvoll ist, zu wissen, was gerade aktuell anliegt, um z.B. einfach komplementär zu reagieren ). Denn man kann damit interaktiv einzelne Stile für einzelne Medien setzen (für die Bildschirmausgabe z.B. einen Text fett, für die Druckausgabe hingegen kursiv). Oder statt x Einzelangaben (obj.style.border=...; obj.style.fontSize=...; obj.style.fontWidth=...; etc.) alle Angaben in eine Regel packen und dann diese schreiben. Oder wenn man Stile bei einer Vielzahl von Objekten ändern möchte, dann muß man nicht alle Elemente in einer Schleife durchgehen, einzeln ansprechen und jeweils die gewünschten Stile ändern bzw. jeweils mit className den Klassennamen ändern, der auf die gewünschten neuen Stile verweist, man ändert einfach die CSS-Regel des Selektors, der für die Formatierung dieser Elemente bereits verantwortlich ist.
Besonders nett: Da diese Stile bereits im HTML-Head definiert werden (STYLE- & LINK-Tag), können sie auch ausgelesen und geändert werden, bevor die HTML-Elemente überhaupt existieren (also noch vor dem BODY-Element), während man die direkte Änderung erst vollziehen kann, nachdem das betreffende HTML-Element selbst bereits existent ist (und damit ggf. mit dem Default-Stil für den Anwender bereits sichtbar war).
"Klassiker" wäre ein z.B. längerer Fließtext mit mehreren Abschnitten, der aber dem Anwender nur ausschnittsweise sichtbar sein soll, auf Wunsch aber verzögerungsfrei (also ohne Nachladen) vollständig angezeigt werden kann. Üblicherweise wird dabei die Seite geladen, gerendert und sobald dies geschehen ist, wird via onload-Event ein JavaScript aufgerufen, das die Infos wieder verschwinden läßt (eine statische CSS-Auszeichnung hier ist weniger sinnvoll, da dann die Benutzer im Regen stehen, die JS nicht nutzen wollen oder können). Das "Rumgeploppe" ist ggf. etwas "verwirrend" für den Anwender. Wenn die Infos aber bereits via JS unsichtbar gemacht werden können bevor der Text überhaupt im Browser ist: Bingo.
Und die Surfer ohne JavaScript (inkl. der Suchmaschinen für die Indizierung) haben halt stets den vollen Langtext - halt ohne Interaktionsmöglichkeit ...
Oder man denke an eine solche Seite, wo bei jedem Absatz ein Kästchen ist [ ] Absatz im Ausdruck
Dann kann der Anwender interaktiv die Druckseite zusammenstellen, vollkommen getrennt von der Bildschirmseite.
Etc.
Reicht das auf die Schnelle als kleine "Anschubhilfe"?
|
|
|
|
|
213db
Dabei seit: 20.09.2005
Ort: -
Alter: -
Geschlecht:
|
Verfasst Do 08.06.2006 14:26
Titel
|
|
|
Deine Anschubhilfe hat mich auf mehrfache Lichtgeschwindigkeit
gebracht.
Danke für die ausführliche Erklärung. Jetzt wird mir einiges klarer.
Durch eine intelligente Vergabe von Selektoren,können dann doch
aber JS-Eingriffe teilweise vermieden werden,oder?
Bei der Druckversion eines Dokuments,kann doch stattdessen
einfach ein anderes Stylesheet zugewiesen werden,anstatt mehrer
Element-Regeln zu ändern?
|
|
|
|
|
|
|
|
Ähnliche Themen |
Mehrere IDs in getElementbyID
Javascript: Problem mit getElementById
Noob frage :-( document.getElementById(' ').style.height
XML -> in PHP auslesen mit DOM
[PHP/SQL] ID Auslesen aus DB? Wie?
XML mit PHP auslesen
|
|