css klasse zur laufzeit mit javascript ändern



  • img {
    	vertical-align: middle;
    	text-align: center;
    	width:20px;
    	height:20px;
    }
    

    hallo,
    ich hab ne tabelle mit ca. 15*15 zellen, in jeder zelle ist ein bild

    <td> <img src= "xx.jpg" name="xx" > </td>
    

    zur laufzeit möchte ich die bildgröße ändern. gibt es eine einfache
    möglichkeit die css klasse zu verändern oder muss ich über alle td zellen
    iterieren?


  • Mod

    jquery und selectoren.



  • ne des mag i net.



  • habs jetzt gefunden:

    document.getElementById(id).style.width = 
    document.getElementById(id).style.height =
    

    entsprechenden wert zuweisen funzt.
    🙂


  • Mod

    css td schrieb:

    habs jetzt gefunden:

    Das ist halt 1. furchtbar lahm und 2. steinzeit.
    lern jquery oder ein ähnliches toolkit.



  • Variante 2 zum Ändern der css-Klasse wäre

    document.getELementById("...").className = "cssKlassenname";
    

    LG



  • Shade Of Mine schrieb:

    css td schrieb:

    habs jetzt gefunden:

    Das ist halt 1. furchtbar lahm und 2. steinzeit.
    lern jquery oder ein ähnliches toolkit.

    wieson dass, jquery ist doch auch 'nur' javascript oda net.


  • Mod

    css td schrieb:

    wieson dass, jquery ist doch auch 'nur' javascript oda net.

    Natuerlich ist es nur JavaScript. Aber dort sitzen Leute die clever sind. sowas passiert dort zB nicht:
    document.getElementById(id).style.width =
    document.getElementById(id).style.height =

    Das muss 2 mal die id finden, das ist schlecht. Weiters gibt es bei selectoren viele Tricks und unterschiedliche Browser Performance. Dafuer holt man sich Profis die die Tricks kennen.

    jquery ist dabei sogar noch ein eher langsames Framework...



  • Wenn er denn nun darauf besteht, ohne jQuery zu arbeiten, wovon ich ihm an dieser Stelle ebenfalls abraten möchte, sollte er den Code zumindest im ersten Punkt, den Shade of Mine ansprach, optimieren:

    <script type="text/javascript">
    document.getElementById('fischbutton').onclick = function () {
    var target = document.getElementById('thefischyimage').style; // Ziel nur einmal ermitteln und in target speichern
    target.height = '42px';
    target.width = '42px'; // keine Wiederholung = schneller
    }
    </script>
    

    Nochmal: Shade of Mine hat Recht: Man kann den Code soweit optimieren, dass er richtig "abgeht". Und da wir das Rad nicht ständig neu entwickeln wollen, solltest du zu einem professionellen Framework wie jQuery oder Ext.JS greifen.

    LG
    Dominik



  • Über documents.styleSheets hat man ein Javascript-Array mit allen geladenen Stylesheets des Dokuments als styleSheet-Object zur Verfügung stehen, die wiederum ein cssRules-Array besitzen in dem alle Regeln des Stylesheets als cssRule-Object hinterlegt sind:

    document.styleSheets
    + document.styleSheets[0]
      + cssRules
        + cssRules[0]
          + cssText
          + selectorText
          + style
          + parentStyleSheet
        + cssRules[1]
          + etc.
    + document.styleSheets[1]
      + etc.
    

    Ein styleSheet-Object besitzt darüberhinaus noch die Methoden insertRule(rule, index) und deleteRule(index). Über insertRule(rule, index) kann man dann z.B. zur Laufzeit des Dokuments neue Regeln hinzufügen, z.B.:

    <script type="text/javascript">
    //<![CDATA[
    var css = document.styleSheets[0];
    var rule = "#mein-absatz:before { content: url(path/to/myimage.png); }";
    css.insertRule(rule, css.cssRules.length);
    //]]>
    </script>
    

    Ein nachträgliches Bearbeiten von vorhandenen CSS-Rules ist offensichtlich nicht mehr möglich, hier muß man die entsprechende Regel zuerst löschen und dann neu setzen, z.B.:

    <script type="text/javascript">
    //<![CDATA[
    var css = document.styleSheets[0];
    var rule = "#mein-absatz:before { content: url(path/to/myimage.png); }";
    css.insertRule(rule, css.cssRules.length);
    css.deleteRule(css.cssRules.length - 1);
    rule = "#mein-absatz:before { content: url(path/to/anotherimage.png); }";
    css.insertRule(rule, css.cssRules.length);
    //]]>
    </script>
    

    Der Zugriff auf die Stylesheets eines Dokuments sind somit quasi unbegrenzt.
    Weitere Dokumentation zum Stylesheets-Object gibt es hier.

    Quelle: http://dadabase.de/weblog/archives/2004/11/08/css-manipulation-mit-javascript-uber-das-stylesheets-object


Anmelden zum Antworten