• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Variablen übergabe

T

Tytomik

Neues Mitglied
Hallo zusammen,
ich möchte eine Variable im JavaScript anlegen und mit css auslesen.
Also ungefähr so:
Code: 
<html><head><title>Variablen uebergabe</title></head>
<body><script language="JavaScript">
var i = 130;
</script>
<style type="text/css">
[B]Hier möchte "i" von JS weiternutzen.[/B]
<style>
</body>
</html>

Vielen Dank! :)
 
CSS ist eine grundsätzlich eine statische Auszeichnungssprache (Ausnahmen in CSS3). Es kann weder auslesen noch irgendetwas tun, es kann nur 'sein'.

Du kannst aber mit JS auf CSS zugreifen und etwa so die CSS-Parameter eines Elements verändern:
Code: 
element.style.backgroundColor = i;
 
Ich habe es zwar noch nie versucht, aber mit PHP wäre so etwas theoretisch möglich.

HTML: 
<?php $zahl = 130; ?>

<!DOCTYPE html>
<html>
<head>
  <style type=test/css>
     #box {
       width: <?php echo $zahl; ?>;
   }
<style>
</head>
 
Schon klar, aber bei der Überlegung, warum jemand so etwas überhaupt tun sollte, fiel mir ein, dass ich tatsächlich mal einen ähnlich gelagerten Fall hatte. Vor längerer Zeit sollte ich eine Webseite crossbrowser-kompatibel bis zum IE7 auf den Pixel genau stylen. Dazu durfte nur ein gemeinsames Stylesheet verwendet werden. Damals hatte ich JavaScript nach Möglichkeit gemieden und wusste auch noch nichts von Browser hacks. Also habe ich mit 'PHP-Injections' gearbeitet, mir eine Useragent-Funktion gebaut und 'dynamisch' CSS-Klassen generiert. War zwar nicht schön und ist auch nicht unbedingt zur Nachahmung empfohlen, hat aber funktioniert, und der Auftraggeber war zufrieden. ^^
HTML: 
<div id="mydiv" class="<?php echo $myclass; ?>"> .... </div>

Es gibt zwar keine Brücke von CSS zu Scriptsprachen, in umgekehrter Richtung funktioniert es allerdings immer. Abgesehen davon lassen sich in CSS durchaus auch eigene Variablen setzen, sofern man ein entsprechendes Framework wie Less oder Sass verwendet und das Stylesheet hinterher durch einen Präprozessor schiebt. Wirklich Sinn macht das allerdings nur bei Code, der wiederverwendet werden soll, also bsw. für die Erstellung von Templates.
 
Zuletzt bearbeitet:
Mit JS wäre es so möglich:

Code: 
<html>
 <head>
  <title>Variablen uebergabe</title>
  <style type="text/css">
   #meineID { width: 200px; }
   <style>
  <script language="JavaScript">
  var i = 130;
  // Element mit der ID "meineID" mit der neuen Breite auf Basis von i versehen
  document.getElementById("meineID").style.width = i + "px";
  </script>
 </head>
 <body id="meineID">
 </body>
</html>
 
Also ich berechne was in JavaScript und brauchen diesen Wert um die Prozentuale Größe eines Fotos anzugeben.
Code: 
<script type="text/javascript">
var i = 1+1;
</script>
<div id="hintergrund"><img src="Bild.jpg" style="width:100%;height:100%" alt="hintergrund"></div> 

<style type="text/css">
div#hintergrund
{
position:absolute;
top:0;
left:0;
width:100%;
height:[B]"i"[/B];    [B]Hier möchte ich i einsetzen.[/B]
z-index:-1;
margin:0;
padding:0;
}
</style>
 
Ergäbe etwa:
HTML: 
<script type="text/javascript">
var i = 1+1;
</script>
<div id="hintergrund"><img src="Bild.jpg" style="width:100%;height:100%" alt="hintergrund"></div> 

<style type="text/css">
div#hintergrund
{
position:absolute;
top:0;
left:0;
width:100%;
z-index:-1;
margin:0;
padding:0;
}
</style>
<script type="text/javascript">document.getElementById('hintergrund').style.height=i+'px';</script>
 
Zuletzt bearbeitet:
Wenn man die Höhe per JavaScript setzt sollte man die Einheit ergänzen:
Code: 
document.getElementById('hintergrund').style.height = i + "px";
 
Oder noch kürzer:
Code: 
$('#hintergrund img').attr('height', i + '%');

Mit JS kann man inline CSS oder HTML dynamisch erzeugen und verändern, aber meines Wissens nicht den Inhalt eines Style-Containers. Das ist nämlich kein DOM Element.
 
Ohne jemandem widersprechen zu wollen und nur der Vollständigkeit wegen:
HTML: 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style id="stylearea">
    body, html {
        height:100%;    
    }
</style>
<script>
    function changeCss(){
        var css = document.getElementById("stylearea");
        css.innerHTML = css.innerHTML + "body{background-color:red;}"
    }
</script>
</head>
<body onload="changeCss()">
</body>
</html>
Das ist NICHT sinnvoll, funktioniert aber prinzipiell. Du kannst mit Javascript in einen CSS-Bereich reinschreiben. (Getestet auf FF und IE9)
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben