nicht angemeldet
css datei mit js einbinden
0 0 0 
Gunnar Bittersmann
0 0 0 0 0 0 Gunnar Bittersmann
0 0 Gunnar Bittersmann
0
0
0
0
css datei mit js einbinden
Hallo Forum,
ist es möglich css mit Javascript einzubinden? Also dass das Stylesheet nur aktiviert wird wenn der user JS geladen hat? Kann mir jemand einen Tipp in die richtige Richtung geben?
-
Hallo Angela.
ist es möglich css mit Javascript einzubinden? Also dass das Stylesheet nur aktiviert wird wenn der user JS geladen hat? Kann mir jemand einen Tipp in die richtige Richtung geben?
<script type="text/javascript">
document.write('<link rel="stylesheet" type="text/css" href="js_style.css">');
</script>Das müsste gehen. Und wenn du willst, dass die User ohne JavaScript auch eine CSS-Datei haben hängst du am Besten noch einen noscript-Bereich dran.
Man liest sich, H2O
--
Dodwin | Download Opera
[ie:% fl:( br:< va:) ls:[ fo:| rl:( n4:( ss:) de:> js:| ch:? sh:( mo:| zu:}](http://www.peter.in-berlin.de/projekte/selfcode/?code=ie%3A%25%20fl%3A(%20br%3A%3C%20va%3A)%20ls%3A%5B%20fo%3A%7C%20rl%3A(%20n4%3A(%20ss%3A)%20de%3A%3E%20js%3A%7C%20ch%3A%3F%20sh%3A(%20mo%3A%7C%20zu%3A%7D)-
Hallo H20,
perfekt, das wars. Es geht nur darum dass ein Wert überschrieben wird wenn JS aktiviert ist (optische Sache). Und das klappt nun.
Vielen Dank, Angela
-
Es geht nur darum dass ein Wert überschrieben wird wenn JS aktiviert ist (optische Sache).
Angela,
Dafür musst du kein Extra-Stylesheet vorsehen; die Eigenschaft kannst du auch direkt setzen:
document.getElementById("foo").style.backgroundColor = "red";Live long and prosper,
Gunnar--
„Weisheit ist nicht das Ergebnis der Schulbildung, sondern des lebenslangen Versuchs, sie zu erwerben.“ (Albert Einstein)-
Hallo,
document.getElementById("foo").style.backgroundColor = "red";das wäre besser, jedoch möchte ich den body ansprechen und diesem ein HIntergrundbild zuweisen. Eine id kann ich diesem nicht geben, da es sich um ein CMS handelt und ich keinen Zugriff habe, bzw. schwer, da müsste wieder in den Quellcode eingegriffen werden was ich vermeiden möchte...
schade...!Leider kriege ich einen Validierungsfehler wenn ich die von H20 gepostete Lösung nutze, der Validator bemängelt das link-Element.
Weiss jemand warum das so ist?
-
Hallo Angela.
das wäre besser, jedoch möchte ich den body ansprechen und diesem ein HIntergrundbild zuweisen. Eine id kann ich diesem nicht geben, da es sich um ein CMS handelt und ich keinen Zugriff habe, bzw. schwer, da müsste wieder in den Quellcode eingegriffen werden was ich vermeiden möchte...
schade...!Wenn das so ist, kannst du den folgenden Code nutzen:
document.getElementsByTagName("body")[0].style.backgroundImage = "url(bild.jpg)";
So müsste es gehen.
Man liest sich, H2O
--
Dodwin | Download Opera
[ie:% fl:( br:< va:) ls:[ fo:| rl:( n4:( ss:) de:> js:| ch:? sh:( mo:| zu:}](http://www.peter.in-berlin.de/projekte/selfcode/?code=ie%3A%25%20fl%3A(%20br%3A%3C%20va%3A)%20ls%3A%5B%20fo%3A%7C%20rl%3A(%20n4%3A(%20ss%3A)%20de%3A%3E%20js%3A%7C%20ch%3A%3F%20sh%3A(%20mo%3A%7C%20zu%3A%7D)-
Hallo,
ich verzweifle langsam, ich kriege es nicht hin.
body {background: #fff url(images/bg_content.gif) repeat-y left top;}
das hier sollte mit js zugewiesen werden...ich kann auf den body-Tag nicht zugreifen (wie schon beschrieben) und das mit dem
document.getElementsByTagName klappt nicht weil ich wohl etwas mit dem Einbinden falsch mache, wo sollte das genau hin?<script type="text/javascript">
document.getElementsByTagName("body")[0].style.backgroundImage = "url(bild.jpg)";
</script>..das ist so nicht richtig oder?
-
Hallo Angela.
body {background: #fff url(images/bg_content.gif) repeat-y left top;}
document.body.style.background = "#fff url(images/bg_content.gif) repeat-y left top";
So müsste es gehen.
<script type="text/javascript">
document.getElementsByTagName("body")[0].style.backgroundImage = "url(bild.jpg)";
</script>
..das ist so nicht richtig oder?Ja, das muss allerdings im body stehen.
Man liest sich, H2O
--
Dodwin | Download Opera
[ie:% fl:( br:< va:) ls:[ fo:| rl:( n4:( ss:) de:> js:| ch:? sh:( mo:| zu:}](http://www.peter.in-berlin.de/projekte/selfcode/?code=ie%3A%25%20fl%3A(%20br%3A%3C%20va%3A)%20ls%3A%5B%20fo%3A%7C%20rl%3A(%20n4%3A(%20ss%3A)%20de%3A%3E%20js%3A%7C%20ch%3A%3F%20sh%3A(%20mo%3A%7C%20zu%3A%7D)-
..das ist so nicht richtig oder?
Ja, das muss allerdings im body stehen.
...auf den ich nicht zugreifen kann ;(
Gibt es noch eine andere valide Möglichkeit?
-
Ja, das muss allerdings im body stehen.
...auf den ich nicht zugreifen kann ;(Angela,Wie, du kannst auf den body nicht zugreifen?
Es geht nicht um das <body>-Starttag (wo man das auch mit
<body onload="[code lang=javascript]document.body.style.backgroundImage = 'foo'">[/code] eintragen könnte), sondern um den Inhalt des body-Elementes. Auf den hast du doch Zugriff? Dort kannst du
~~~html <script type="text/javascript">
[code lang=javascript]document.body.style.backgroundImage = "foo"</script>[/code] eintragen. Alternativ geht es auch im head-Element, dort aber anders, da beim Parsen dort das body-Element noch gar nicht existiert. Deshalb so: ~~~html <script type="text/javascript"> [code lang=javascript]window.onload = function() { document.body.style.backgroundImage = "foo" }</script>[/code]
was dasselbe bewirkt wie der onload-Eventhandler als Attribut des body-Elements.Live long and prosper,
Gunnar--
„Weisheit ist nicht das Ergebnis der Schulbildung, sondern des lebenslangen Versuchs, sie zu erwerben.“ (Albert Einstein)-
»» Alternativ geht es auch im head-Element, dort aber anders, da beim Parsen dort das body-Element noch gar nicht existiert. Deshalb so:
~~~html
<script type="text/javascript">
[code lang=javascript]window.onload = function() {
document.body.style.backgroundImage = "foo"
}> </script>[/code] > was dasselbe bewirkt wie der onload-Eventhandler als Attribut des body-Elements. Ok...ich habe nun folgendes im head notiert: <script type="text/javascript"> window.onload = function() { document.body.style.background = "#fff url(images/bg\_content.gif) repeat-y left top" } </script> aber es zeigt keine Wirkung. Habe ich etwas falsch verstanden? Vielen Dank für die viele Hilfe, tut mir leid dass ich sie weiterhin beanspruchen muss...-
aber es zeigt keine Wirkung. Habe ich etwas falsch verstanden?
Nö, Angela, das Script sieht gut aus.
Stimmt der Pfad zur Bilddatei? Der ist jetzt relativ zum HTML-Dokument, nicht wie evtl. vorher zur CSS-Datei.
Live long and prosper,
Gunnar--
„Weisheit ist nicht das Ergebnis der Schulbildung, sondern des lebenslangen Versuchs, sie zu erwerben.“ (Albert Einstein)-
Stimmt der Pfad zur Bilddatei? Der ist jetzt relativ zum HTML-Dokument, nicht wie evtl. vorher zur CSS-Datei.
Ja, das war ein guter Gedanke - ich habs berichtigt.
JEtzt werdet ihr mich gleich hassen, aber es geht immer noch nicht;(
Ich binde nämlich danach noch ein weiteres JS ein. Nehme ich es heraus, klappt das mit dem Hintergrundbild. Beide verstehen sich jedoch nicht.das hier kommt also als erstes:
<script type="text/javascript">
window.onload = function() {
document.body.style.background = "#fff url(picture/bg_content.gif) repeat-y left top"
}
</script>ich poste jetzt mal das darauffolgende script (von alistapart, es geht darum dass der footer immer am unteren Ende des Browserfensters stehen soll).
<script type="text/javascript">
<!--
function getWindowHeight() {
var windowHeight = 0;
if (typeof(window.innerHeight) == 'number') {
windowHeight = window.innerHeight;
}
else {
if (document.documentElement && document.documentElement.clientHeight) {
windowHeight = document.documentElement.clientHeight;
}
else {
if (document.body && document.body.clientHeight) {
windowHeight = document.body.clientHeight;
}
}
}
return windowHeight;
}
function setFooter() {
if (document.getElementById) {
var windowHeight = getWindowHeight();
if (windowHeight > 0) {
var contentHeight = document.getElementById('outer').offsetHeight;
var footerElement = document.getElementById('footer');
var footerHeight = footerElement.offsetHeight;
if (windowHeight - (contentHeight + footerHeight) >= 0) {
footerElement.style.position = 'relative';
footerElement.style.top = (windowHeight - (contentHeight + footerHeight)) + 'px';
}
else {
footerElement.style.position = 'static';
}
}
}
}
window.onload = function() {
setFooter();
}
window.onresize = function() {
setFooter();
}
//-->
</script>Wie kriege ich die nun zusammen?
Vielen Dank...
-
Ja, das war ein guter Gedanke - ich habs berichtigt.
;-)
JEtzt werdet ihr mich gleich hassen,
Och nö.
Ich binde nämlich danach noch ein weiteres JS ein. […] Beide verstehen sich jedoch nicht.
window.onload = function() {
setFooter();
}Damit überschreibst du den zuerst gestzten Wert von window.onload.
Das sollte also nur einmal auftauchen und in die Funktion muss alles rein, was beim Laden passieren soll:
window.onload = function() { document.body.style.background = "#fff url(picture/bg_content.gif) repeat-y left top"; setFooter(); }Live long and prosper,
Gunnar--
„Weisheit ist nicht das Ergebnis der Schulbildung, sondern des lebenslangen Versuchs, sie zu erwerben.“ (Albert Einstein)-
Damit überschreibst du den zuerst gestzten Wert von window.onload.
Das sollte also nur einmal auftauchen und in die Funktion muss alles rein, was beim Laden passieren soll:
window.onload = function() {
document.body.style.background = "#fff url(picture/bg_content.gif) repeat-y left top";
setFooter();
}> Ok das habe ich verstanden... wunderbar. jetzt sag mir noch wie ich Dir bitte jemals genug danken kann? ;)-
jetzt sag mir noch wie ich Dir bitte jemals genug danken kann? ;)
<♫>Niklaus ist ein guter Mann,
dem man nie g’nug danken kann …</♫>Live long and prosper,
Gunnar--
„Weisheit ist nicht das Ergebnis der Schulbildung, sondern des lebenslangen Versuchs, sie zu erwerben.“ (Albert Einstein)-
<♫>Niklaus ist ein guter Mann,
dem man nie g’nug danken kann …</♫>Da lohnt es sich, wieder an ihn zu glauben ;)
-
-
-
-
-
-
-
-
-
Hallo H2O.
[…]
..das ist so nicht richtig oder?Ja, das muss allerdings im body stehen.
Nö, das kann auch in einem script-Block im head-Element notiert werden.
Dann natürlich mit Hilfe von http://de.selfhtml.org/javascript/objekte/window.htm@title=window.http://de.selfhtml.org/javascript/sprache/eventhandler.htm#onload@title=onload.Einen schönen Sonntag noch.
Gruß, Ashura
-
Nö, das kann auch in einem script-Block im head-Element notiert werden.
Dann natürlich mit Hilfe von http://de.selfhtml.org/javascript/objekte/window.htm@title=window.http://de.selfhtml.org/javascript/sprache/eventhandler.htm#onload@title=onload.wie meinst Du das? In selfhtml finde ich dazu <body onload="NaviFenster()"> ...etc.
aber dazu müsste ja wieder etwas im body-Tag notiert werden.
Gibt es eine Möglichkeit völlig unabhängig davon das Gewünschte zu erreichen?-
Hallo Angela.
Dann natürlich mit Hilfe von http://de.selfhtml.org/javascript/objekte/window.htm@title=window.http://de.selfhtml.org/javascript/sprache/eventhandler.htm#onload@title=onload.
wie meinst Du das? In selfhtml finde ich dazu <body onload="NaviFenster()"> ...etc.
Was hat dich daran gehindert, die hiesige Archivsuche mit obigem Stichwort zu befüllen?
Einen schönen Sonntag noch.
Gruß, Ashura
-
-
Hallo Ashura.
Nö, das kann auch in einem script-Block im head-Element notiert werden.
Dann natürlich mit Hilfe von http://de.selfhtml.org/javascript/objekte/window.htm@title=window.http://de.selfhtml.org/javascript/sprache/eventhandler.htm#onload@title=onload.Auf das hier bezogen geht es allerdings nicht im head:
<script type="text/javascript">
document.getElementsByTagName("body")[0].style.backgroundImage = "url(bild.jpg)";
</script>Denn hier würde versucht auf den body zuzugreifen, bevor er im Browser existiert.
Man liest sich, H2O
--
Dodwin | Download Opera
[ie:% fl:( br:< va:) ls:[ fo:| rl:( n4:( ss:) de:> js:| ch:? sh:( mo:| zu:}](http://www.peter.in-berlin.de/projekte/selfcode/?code=ie%3A%25%20fl%3A(%20br%3A%3C%20va%3A)%20ls%3A%5B%20fo%3A%7C%20rl%3A(%20n4%3A(%20ss%3A)%20de%3A%3E%20js%3A%7C%20ch%3A%3F%20sh%3A(%20mo%3A%7C%20zu%3A%7D)-
Hallo H2O.
Denn hier würde versucht auf den body zuzugreifen, bevor er im Browser existiert.
Deswegen ja auch window.onload.
Einen schönen Sonntag noch.
Gruß, Ashura
-
Hallo Ashura.
Deswegen ja auch window.onload.
siehe https://forum.selfhtml.org/?t=121585&m=781737:
Angela kann nicht auf den body zugreifen... ;-PMan liest sich, H2O
--
Dodwin | Download Opera
[ie:% fl:( br:< va:) ls:[ fo:| rl:( n4:( ss:) de:> js:| ch:? sh:( mo:| zu:}](http://www.peter.in-berlin.de/projekte/selfcode/?code=ie%3A%25%20fl%3A(%20br%3A%3C%20va%3A)%20ls%3A%5B%20fo%3A%7C%20rl%3A(%20n4%3A(%20ss%3A)%20de%3A%3E%20js%3A%7C%20ch%3A%3F%20sh%3A(%20mo%3A%7C%20zu%3A%7D)-
Hallo H2O.
Deswegen ja auch window.onload.
siehe https://forum.selfhtml.org/?t=121585&m=781737:
Angela kann nicht auf den body zugreifen... ;-PDeswegen soll sie ja auch im head-Element agieren.
Einen schönen Sonntag noch.
Gruß, Ashura
-
Hallo Ashura.
Deswegen soll sie ja auch im head-Element agieren.
Ui... Hätte ich mir den Thread bloß richtig durchgelesen...
Sorry... Ich nehm alles zurück ;)Man liest sich, H2O
--
Dodwin | Download Opera
[ie:% fl:( br:< va:) ls:[ fo:| rl:( n4:( ss:) de:> js:| ch:? sh:( mo:| zu:}](http://www.peter.in-berlin.de/projekte/selfcode/?code=ie%3A%25%20fl%3A(%20br%3A%3C%20va%3A)%20ls%3A%5B%20fo%3A%7C%20rl%3A(%20n4%3A(%20ss%3A)%20de%3A%3E%20js%3A%7C%20ch%3A%3F%20sh%3A(%20mo%3A%7C%20zu%3A%7D)
-
-
-
-
-
-
-
-
Hallo H2O.
Wenn das so ist, kannst du den folgenden Code nutzen:
document.getElementsByTagName("body")[0].style.backgroundImage = "url(bild.jpg)";
Oder kürzer:
document.body.style.backgroundImage = 'url(bild.jpg)';
(Hm, warum ist das http://de.selfhtml.org/javascript/objekte/document.htm@title=hier nicht dokumentiert?)Einen schönen Sonntag noch.
Gruß, Ashura
-
-
-
-
-
Hallo H2O,
Das müsste gehen. Und wenn du willst, dass die User ohne JavaScript auch eine CSS-Datei haben hängst du am Besten noch einen noscript-Bereich dran.
NOSCRIPT ist jedoch im HEAD verboten, eine externe CSS kann afaik aber nur im HEAD eingebunden werden...
Mit freundlichem Gruß
Micha
-