Změna CSS pomocí Javascriptu

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.

$('.prepinac').toggle(
  function(){
     $('.t_tlacitko').show();
  },
  function(){
     $('.t_tlacitko').hide();
  }
)

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í:

/*****Library - directly change css rule *****/
//Example:changecss('.ClassName','width','280px'); changecss('#IDname','color','red');
function changecss(theClass,element,value) {
	var cssRules;
	for (var S = 0; S < document.styleSheets.length; S++){
		try{
			document.styleSheets[S].insertRule(theClass+' { '+element+': '+value+'; }',document.styleSheets[S][cssRules].length);
		} catch(err){
			try{document.styleSheets[S].addRule(theClass,element+': '+value+';');
			}catch(err){
				try{
					if (document.styleSheets[S]['rules']) {
						cssRules = 'rules';
					} else if (document.styleSheets[S]['cssRules']) {
						cssRules = 'cssRules';
					} else {
						//no rules found... browser unknown
					}
					for (var R = 0; R < document.styleSheets[S][cssRules].length; R++) {
						if (document.styleSheets[S][cssRules][R].selectorText == theClass) {
							if(document.styleSheets[S][cssRules][R].style[element]){
								document.styleSheets[S][cssRules][R].style[element] = value;
								break;
							}
						}
					}
				} catch (err){}
				}
			}
		}
	}

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.

$('.prepinac').toggle(
  function(){
     changecss('.t_tlacitko','display','block')  
   },
  function(){
     changecss('.t_tlacitko','display','none')  
  }
)