mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Do 28.03.2024 09:23 Benutzername: Passwort: Auto-Login

Thema: CSS mit JS auslesen: getElementById vom 21.04.2006


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Programmierung -> CSS mit JS auslesen: getElementById
Seite: 1, 2  Weiter
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

Antworten mit Zitat Zum Seitenanfang

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
  View user's profile Private Nachricht senden
dastef

Dabei seit: 03.11.2003
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Fr 21.04.2006 18:05
Titel

Antworten mit Zitat Zum Seitenanfang

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ö * Ja, ja, ja... *


Zuletzt bearbeitet von dastef am Fr 21.04.2006 20:31, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden
Anzeige
Anzeige
possmann

Dabei seit: 18.04.2006
Ort: -
Alter: -
Geschlecht: -
Verfasst Fr 21.04.2006 18:15
Titel

Antworten mit Zitat Zum Seitenanfang

probiers mal hiermit:

http://jstruebig.de/web/javascript/lib/css.html

habs nich getestet, aber sollte das entsprechen was du suchst...

mfg possmann
  View user's profile Private Nachricht senden
Raumwurm

Dabei seit: 21.12.2004
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Fr 21.04.2006 19:21
Titel

Antworten mit Zitat Zum Seitenanfang

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>
  View user's profile Private Nachricht senden
Cybaer

Dabei seit: 08.06.2006
Ort: Heidelberg
Alter: -
Geschlecht: Männlich
Verfasst Do 08.06.2006 09:47
Titel

Re: CSS mit JS auslesen: getElementById

Antworten mit Zitat Zum Seitenanfang

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).
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
213db

Dabei seit: 20.09.2005
Ort: -
Alter: -
Geschlecht: Weiblich
Verfasst Do 08.06.2006 12:10
Titel

Antworten mit Zitat Zum Seitenanfang

Darf ich mal ganz unwissend fragen,welchen praktischen Nutzen das
Auslesen von CSS-Eigenschaften über JS in diesem Fall hat?
  View user's profile Private Nachricht senden
Cybaer

Dabei seit: 08.06.2006
Ort: Heidelberg
Alter: -
Geschlecht: Männlich
Verfasst Do 08.06.2006 13:57
Titel

Antworten mit Zitat Zum Seitenanfang

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? *zwinker*

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 *zwinker*). 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. *zwinker* 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"? *zwinker*
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
213db

Dabei seit: 20.09.2005
Ort: -
Alter: -
Geschlecht: Weiblich
Verfasst Do 08.06.2006 14:26
Titel

Antworten mit Zitat Zum Seitenanfang

Deine Anschubhilfe hat mich auf mehrfache Lichtgeschwindigkeit
gebracht. *zwinker*

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?
  View user's profile Private Nachricht senden
 
Ä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
Neues Thema eröffnen   Neue Antwort erstellen Seite: 1, 2  Weiter
MGi Foren-Übersicht -> Programmierung


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.