Změna CSS pomocí Javascriptu

Odesláno v January 4, 2012 | Kategorie Javascript, Programování, webdesign | Leave a Comment

Včera jsem potřeboval jednoduchou věc na Bookmarky.cz: zobrazit a skrývat tlačítko (pro smazání) u každého odkazu. Stránka používá JQuery, tak by to nebyl problém.

  1. $('.prepinac').toggle(
  2.   function(){
  3.      $('.t_tlacitko').show();
  4.   },
  5.   function(){
  6.      $('.t_tlacitko').hide();
  7.   }
  8. )

JQuery funguje tak, že najde všechny objekty odpovídající kritériu “.t_tlacitko” a každému nastaví nový styl. Problém se vyjeví v okamžiku, kdy na stránce potřebujeme vytvořit nový element .t_tlacitko. Ten dostane do vínku pouze výchozí styl, tedy u nového prvku se tlačítko se zobrazí, i když máme ostatní pěkně schované. Bylo by třeba updatovat všechny prvky po každém vytvoření záložky, což by asi nikdo soudný nedělal.

Ideální je skrývat je přímo změnou pravidla v CSS. Přiznám se, myslel jsem, že to lze javascriptem snadněji. Internet Explorer totiž používá pro CSSrules jiné označení než standardy-uznávající okolní svět.

Nakonec jsem našel toto řešení:

  1. /*****Library – directly change css rule *****/
  2. //Example:changecss('.ClassName','width','280px'); changecss('#IDname','color','red');
  3. function changecss(theClass,element,value) {
  4.  var cssRules;
  5.  for (var S = 0; S < document.styleSheets.length; S++){
  6.   try{
  7.    document.styleSheets[S].insertRule(theClass+' { '+element+': '+value+'; }',document.styleSheets[S][cssRules].length);
  8.   } catch(err){
  9.    try{document.styleSheets[S].addRule(theClass,element+': '+value+';');
  10.    }catch(err){
  11.     try{
  12.      if (document.styleSheets[S]['rules']) {
  13.       cssRules = 'rules';
  14.      } else if (document.styleSheets[S]['cssRules']) {
  15.       cssRules = 'cssRules';
  16.      } else {
  17.       //no rules found… browser unknown
  18.      }
  19.      for (var R = 0; R < document.styleSheets[S][cssRules].length; R++) {
  20.       if (document.styleSheets[S][cssRules][R].selectorText == theClass) {
  21.        if(document.styleSheets[S][cssRules][R].style[element]){
  22.         document.styleSheets[S][cssRules][R].style[element] = value;
  23.         break;
  24.        }
  25.       }
  26.      }
  27.     } catch (err){}
  28.     }
  29.    }
  30.   }
  31.  }

Vykonání skriptu by mělo být je mnohem rychlejší než pomocí JQuery, protože neměníme styl postupně u všech prvků, ale přímo v hlavním CSS.

  1. $('.prepinac').toggle(
  2.   function(){
  3.      changecss('.t_tlacitko','display','block')  
  4.    },
  5.   function(){
  6.      changecss('.t_tlacitko','display','none')  
  7.   }
  8. )
Hlasujte pro tento článek:
  • Bookmarky.cz
  • Digg
  • del.icio.us
  • Google
  • Linkuj
  • Vybrali.sme
  • E-mail this story to a friend!
  • Facebook
  • LinkedIn

Komentáře

Váš komentář: