mittels js die css verändern

[rernanded]

Hi

ich versuche gerade mittels Eingabe in ein input den css style zu ändern. Grundsätzlich ist das kein Problem. Ich will dies jedoch anhand der eingegeben Zahlenwerte. Gebe ich eine 1 ein soll sich beispielsweise die opacity von 0 in 1 ändern.

MONI

Hier ein Versuch der aber nicht funktioniert, auch nicht mit charCode:

<script>
function changeOpacity() {
      if(Input.GetKeyDown(keyCode.1))
      {
      var elem = document.getElementById("box1");
      elem.style.opacity = "1";
      }
}
</script>

 

[Sempervivum]

Dies sollte es tun:
https://jsfiddle.net/Sempervivum/x51pdLkL/3/

 

[rernanded]

@Sempervivum: Danke Dir. Alles gut.

Aber geht das ganze auch wenn die Werte in dem input aus einer Datenbank kommen und gar keine Taste gedrückt wird / ohne das die Seite neu geladen werden muß (reload etc.)? Oder sollte ich dann auf dynamisches css mit php zurückgreifen. Wobei dabei wohl auch Tastenanschläge notwendig sind / reload etc.???

MONI.

 

[Sempervivum]

Natürlich, dann ist es wahrscheinlich viel einfacher. Ich gehe davon aus, dass in diesem Fall der Wert in einer PHP-Variablen liegt. Dann brauchst Du IMO nicht mal Javascript und keinen Input:

<style>
    #id_deines_elementes {
        opacity: <?php echo  $deine_variable_ mit_dem_opacicty_wert; ?>
    }
</style>

Muss natürlich in einer PHP-Datei stehen und nicht in einer ausgelagerten CSS-Datei.
Kommt mir irgend wie zu einfach vor. Wenn es für deine Gegebenheiten nicht passt, dann melde dich wieder und beschreibe es genauer.

 

[Jan-Frederik Stieler]

Es kann auch in einer ausgelagerten CSS-Datei stehen wenn diese die Endung PHP hat und einen CSS-Header

header("Content-type: text/css; charset: UTF-8");

.

Gruß

 

[SpiceLab]

Siehe hierzu z.B.:

• http://www.webmasterpro.de/coding/article/php-in-css-dss-dynamic-style-sheet.html
• http://frontend.pro/php/dynamisches-css
• http://tutcube.de/tutorials/webentwicklung/dynamisches-css-mit-php-attribute-aendern-mit-php

Die Technik ist aber auch nichts Neues... persönlich bin ich 2008 darauf aufmerksam geworden, und hatte sie direkt in einem aktuell laufenden Projekt verbaut (Hintergrundbilder-Array, der per shuffle ordentlich durchgemischt wird, und so auf der Seite für Abwechslung sorgt )