nicht angemeldet
JS Syntax für Anfänger: CSS-Werte bedingt in Javascript auslesen
StruppiAuf der Homepage meiner künftigen Website soll der Header höher sein als auf den übrigen Seiten. Der Übergang soll fließend erfolgen, innerhalb einer Sekunde.
Ich habe bereits ein fertiges Skript, dass im Zusammenhang mit CSS3-Attributen diesen Übergang anzeigt.
Zum Ausprobieren habe ich zwei HTML-Seiten erstellt, die eine hatte ein div class="homehead", die andere ein div class="head".
Javascript:
querySelector(div.head)
el.className = "head"
Funktioniert auch mit IDs, dann heißt's
querySelector(div#head) und
el.id = "head"
Da ich etwas dynamisches mit Wordpress aufsetzen möchte, frage ich mich nun, wie man die *Kombination* aus Klasse + ID ansprechen muss in Javascript.
Ich habe ein <body class="home">Tag und darin ein <div id="header"> und müsste dies in Javascript entsprechend berücksichtigen.
Ausprobiert habe ich
querySelector(div.home#header), ... (body.home) & (div.header) und
el.className = "home" & el.id = "header"
und verschiedene andere Varianten, leider ohne Erfolg.
querySelector kann schon nicht stimmen, da die Klasse dem Body-Tag zugeordnet ist und nicht dem div - oder ist das im Javascript egal?
Ich denke, es müsste ein "billiges" Syntax-Problem sein (es müssen halt zwei Werte verknüpft werden), nur weiß ich nicht, wo ich das nachschlagen soll.
Danke!
-
Hi,
Da ich etwas dynamisches mit Wordpress aufsetzen möchte, frage ich mich nun, wie man die *Kombination* aus Klasse + ID ansprechen muss in Javascript.
querySelector nutzt CSS-Selektoren zum finden von Elementen, also ist deine Frage eigentlich in erster Linie eine CSS-Frage.
Ich habe ein <body class="home">Tag und darin ein <div id="header"> und müsste dies in Javascript entsprechend berücksichtigen.
Dann interessiert dich neben dem Element-, ID- und Klassen-Selektor auch der Nachfahrenselektor.
http://wiki.selfhtml.org/wiki/Referenzen:CSS/Selektorenreferenz
MfG ChrisB
--
RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?-
querySelector nutzt CSS-Selektoren zum finden von Elementen, also ist deine Frage eigentlich in erster Linie eine CSS-Frage.
Das geht aber auch erst im IE8 aufwärts - darunter ist man auf externe Selektor-Engine angewiesen.
-
Nein und OK.
Meine Frage bleibt eine Javascript-Frage. Zwar geht es um CSS-Selektoren, zu diesen habe ich aber keine Frage, die stehen eben im CSS-File drin.
Aber wie müssen diese innerhalb eines JS-Skriptes angesprochen werden? Speziell wenn es um sowohl Klassen als auch (gleichzeitig) IDs geht?
S. Post oben.Was ist eine "externe Selektor-Engine"?
-
Aber wie müssen diese innerhalb eines JS-Skriptes angesprochen werden? Speziell wenn es um sowohl Klassen als auch (gleichzeitig) IDs geht?
S. Post oben.Es gibt noch keine Browserübergreifende Möglichkeit dafür. Neuere Browser können queryselector http://dev.w3.org/2006/webapi/selectors-api/
Aber wenn du die ID hast ist es eigentlich einfach:
var el = document,getElementById(id); if(el.className.match(/\bname_der_klasse\b/i) { // Element gefunden }Was ist eine "externe Selektor-Engine"?
z.b. Sizzle
Struppi.
-
Hi,
Meine Frage bleibt eine Javascript-Frage. Zwar geht es um CSS-Selektoren, zu diesen habe ich aber keine Frage, die stehen eben im CSS-File drin.
Aber wie müssen diese innerhalb eines JS-Skriptes angesprochen werden?
Genauso, wie sie auch im CSS verwendet werden würden.
MfG ChrisB
--
RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?
-
-
-
Das ist alles bereits im CSS berücksichtigt:
CSS:
#header {height:Wert1;}
.body #header {height:Wert2;}So, meine Frage jetzt:
Wie muss die JS Syntax aussehen, um mit querySelector die Kombination .body #header abzufragen?
Und wie muss die el-Syntax aussehen?Für einen einzelnen Selektor kein Problem:
querySelector(div#header), bzw.
el.id = "header"aber
Wie fragt man nach Wert 2, also der Kombination aus einer Klasse und einer ID?
querySelector(body.home)&(div#header)???
el.className="home" & el.id= "header"???(Das da oben ist Teil meiner verzweifelten Suche nach der richtigen Syntax)
Ist's klarer jetzt?
-
Hi,
Wie muss die JS Syntax aussehen, um mit querySelector die Kombination .body #header abzufragen?
Nicht anders.
Und wie muss die el-Syntax aussehen?
Was soll eine el-Syntax sein?
Für einen einzelnen Selektor kein Problem:
querySelector(div#header)Abgesehen von der fehlenden Kennzeichnung als String.
Wie fragt man nach Wert 2, also der Kombination aus einer Klasse und einer ID?
Genauso - in dem man den daraus zusammengesetzten Selektor angibt.
Ist's klarer jetzt?
Hoffentlich.
MfG ChrisB
--
RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?-
Hallo,
Was soll eine el-Syntax sein?
Tja, meine Unkenntnis...
Die "Syntax rund um el" - weiß doch nicht, wie man das nennt. Anbei mal das Skript:function headertransition() {
var el = updateTransition();el.addEventListener("transitionend", updateTransition, true);
}function updateTransition() {
var el = document.querySelector("div#homeheader");if (el) {
el.id = "header";
} else {
el = document.querySelector("div#header");
el.id = "homeheader";
}return el;
}Dieses Skript funktioniert mit zwei unterschiedlichen IDs.
Ich will aber in WordPress dynamisch Klassen für's body-Tag vergeben (darunter <body class="home">) und die Animation abhängig von der verwendeten Klasse ablaufen lassen.el.id = "blub" bzw. el.className = "bla" --> Wie fragt man nach
el.className+id
?
Wie fragt man nach Wert 2, also der Kombination aus einer Klasse und einer ID?
Genauso - in dem man den daraus zusammengesetzten Selektor angibt.
zur Sicherheit: querySelector(body.home&div#header)?oder eher ... (div.home#header)? Ich kann's nicht sinnvoll prüfen, da das Script generell nicht funktioniert, s.o. var= el
Danke nochmal.
Danny
-
-
-
-
Da ich etwas dynamisches mit Wordpress aufsetzen möchte, frage ich mich nun, wie man die *Kombination* aus Klasse + ID ansprechen muss in Javascript.
Ich habe ein <body class="home">Tag und darin ein <div id="header"> und müsste dies in Javascript entsprechend berücksichtigen.Ausprobiert habe ich
querySelector(div.home#header), ... (body.home) & (div.header) und
el.className = "home" & el.id = "header"
und verschiedene andere Varianten, leider ohne Erfolg.Die richtige Variante wäre: 'body.home div#header'
Der body mit der Klasse home gefolgt von einem DIV mit der ID 'header'
querySelector kann schon nicht stimmen, da die Klasse dem Body-Tag zugeordnet ist und nicht dem div - oder ist das im Javascript egal?
Je nachdem, du kannst auch schreiben: '.home div#header', dann wäre es egal, was für ein Element die Klasse home hat
Struppi.
-
Yessah!
Danke!
Jetzt fehlt mir nur noch der 2. Teil im Skript, in dem für el. sowohl eine Klasse, als auch eine ID zugewiesen werden muss.
Im Einzelfall (entweder Klasse oder ID) sieht's einfach so aus:
Klasse: el.className
ID: el.IDWie weise ich dem "el." sowohl die Klasse als auch die ID zu?
-
Jetzt fehlt mir nur noch der 2. Teil im Skript, in dem für el. sowohl eine Klasse, als auch eine ID zugewiesen werden muss.
Bitte versuche deine Fragen, auch wenn es eine Folgefrage ist, so zu formulieren, dass man sich nicht alle Informationen aus dem thread zusammen suchen muss.
Im Einzelfall (entweder Klasse oder ID) sieht's einfach so aus:
Klasse: el.className
ID: el.IDFals du die ID des Elementes meinst, die wird in JS klein geschrieben.
Wie weise ich dem "el." sowohl die Klasse als auch die ID zu?
Die Frage verstehe ich nicht, du hast sie doch oben drüber bereits beantwortet.
Struppi.
-
<quote>
function headertransition() {
var el = updateTransition();el.addEventListener("transitionend", updateTransition, true);}
function updateTransition() {
var el = document.querySelector("div#homeheader");if (el) { el.id = "header"; } else { el = document.querySelector("div#header"); el.id = "homeheader"; } return el;}
</quote>Obiges Skript ist dasjenige, mit dem ich experimentiert habe unter Verwendung zweier schlichter HTML-Seiten.
Jetzt soll es so funktionieren, dass es die Kombination aus Klasse .home und ID #header berücksichtigt:function headertransition() {
var el = updateTransition();el.addEventListener("transitionend", updateTransition, true);}
function updateTransition() {
var el = document.querySelector("body.home div#header");/* müsste jetzt so stimmen */
if (el) { el.id = "header";/* Gemeint ist #header ohne übergeordnete .home-Klasse */
} else { el = document.querySelector("div#header"); el.id = "homeheader";/* das obige "el.id = 'homeheader'" müsste ich jetzt umschreiben auf 'el.className = "body" UND el.id = "header"' – zumindest verstehe ich das so. Und genau hierfür ist mir die notwendige Schreibweise nicht klar. */
}return el;}
Habe ich mich klarer ausgedrückt?
Falls nicht, habe ich vermutlich ein grundsätzliches Verständnisproblem zur Funktion...Danke vorab!
-
Nachtrag zu oben:
<quote>
if (el) {
el.id = "header";
</quote>Oder reicht es gar nicht, das so wie o.a. zu schreiben, weil es ja nicht explizit ausschließt, dass ein übergeordnetes .body-Element existiert.
Wie man *das* allerdings korrekt ausdrückt, weiß ich (erst recht) nicht... :(
-
Habe ich mich klarer ausgedrückt?
Nicht wirklich, mir ist es völlig unklar, was du damit überhaupt erreichen willst. Warum willst du die ID von Elementen, die du bereits ermittelt hast nachträglich verändern? Und das mit der Klasse verstehe ich überhaupt nicht.
Warum versuchst du nicht zu beschreiben, was du konkret vorhast?
Struppi.
-
Hallo Struppi,
erst mal danke fürs beharrliche Nachfassen und für die Zeit!
Mein Anliegen:
Die Homepage einer entstehenden Website soll einen höheren Header bekommen als die anderen Seiten (damit Flash-Filmchen o.ä. darin ablaufen können). Damit es nicht zu unschönen Sprüngen kommt, soll der Übergang animiert werden. Meinem Wissensstand zufolge ist das nur mit CSS3-Attributen möglich.
Ist der User auf der Homepage und klickt eine andere Seite an: JS-Animation schrumpelt den Header auf Normalformat; klickt der Besucher auf Home: Header wird wieder verbreitert.Das zuvor gepostete Skript funktioniert mit zwei separaten HTML-Dateien schon ganz gut: Wenn ich zwischen den beiden hin- und hernavigiere, kann ich in Safari und Opera (nicht aber in Firefox) die Animation bewundern.
Hier das CSS zum Skript:
*********
#header, #homeheader{
position: absolute;
-moz-transition-property: height;
-moz-transition-duration: 1s;
-webkit-transition-property: height;
-webkit-transition-duration: 1s;
-o-transition-property: height;
-o-transition-duration: 1s;
width: 750px;
background:#eee url("header_bg.png");
}#header {
height: 154px;
}#homeheader {
height: 224px;
}************
Da ich die Website mit WordPress erstellen möchte und WP die Klassen dynamisch erzeugt, suche ich nach einer Lösung, wie ich um die Schreibweise #header vs. #homeheader herumkomme zugunsten von #header vs. .home #header. Im CSS natürlich kein Problem.
Ich habe aber das JS-Skriptchen nicht wirklich geistig durchdrungen und dachte, ich bin fein raus, wenn ich überall, wo jetzt #homeheader steht, sinngemäß .body #header notiere.
In der 2. Zeile des Skripts (bei <==== )hast Du für ("div#homeheader") bereits die Schreibweise ("body.home div#header) angeregt, aber in der 8. Zeile? Statt el.id = "homeheader"; -> el.className = "home" &/plus/+ el.id = "header". Was auch immer ich hier probiert habe, es funzte nicht. Ich müsste el.className und el.id doch irgendwie boole-mäßig verknüpfen, oder?Oder liegt hier ein grundsätzlicher Verständnisfehler?
Nochmal der letzte Teil:
**********
1 function updateTransition() {
2 var el = document.querySelector("div#homeheader"); <====
3
4 if (el) {
5 el.id = "header";
6 } else {
7 el = document.querySelector("div#header");
8 el.id = "homeheader"; <====
9 }
10
11 return el;
12 }**********
Tja, ich denke, das müsste alles sein. Bin gespannt.
Gruß,
Danny
-
Da jetzt gar keine Antwort mehr erfolgt würde mich der Grund interessieren.
- Ist die Frage zu lang?
- Frage ich zu oft?
- Ist meine Frage unverständlich?
- Gibt's irgend etwas, was daran als "anstößig" empfunden wird? (Z.B.: Ist meine Frage zu "doof"?)
- Oder - was ich eher weniger glaube - gibt's darauf keine Antwort...?
- Oder ist eine Wartezeit von knapp einer Woche durchaus angemessen?
etc. etc.
Wenigstens dazu fände ich eine Stellungnahme angemessen. Ich lerne ja gerne dazu, auch wenn's "nur" die Interaktion in Foren betrifft.
Gruß
-
Da jetzt gar keine Antwort mehr erfolgt würde mich der Grund interessieren.
Ich war am Wochenende nur sporadisch am Computer.
- Ist die Frage zu lang?
Auch das.
- Frage ich zu oft?
Nein.
- Ist meine Frage unverständlich?
Es geht. Die Frage an sich ist verständlich, aber mir leuchtet immer noch nicht ein, was du da vorhast. Es klingt auf jeden Fall sehr umständlich und nach meiner Erfahrung dürfte das was du da machen willst auch nicht nötig sein. Nur, es ist eben nicht wirklich klar, was genau das Problem ist.
- Gibt's irgend etwas, was daran als "anstößig" empfunden wird? (Z.B.: Ist meine Frage zu "doof"?)
Jede Frage ist doof ;-)
- Oder - was ich eher weniger glaube - gibt's darauf keine Antwort...?
So wie die Frage formuleirt ist, könnte man sagen, ja.
Wenigstens dazu fände ich eine Stellungnahme angemessen. Ich lerne ja gerne dazu, auch wenn's "nur" die Interaktion in Foren betrifft.
Mir ist nicht klar, warum WP die Klassen dynamisch erstellt, die vergibst du doch in deinem Template. Ausserdem was ist eigentlich konkret das Problem daran, dass die Klassen so heißen und warum willst du unbedingt, dass sie anders heißen?
Struppi.
-
-
-
-
-
-