2009-12-23 20 views

Répondre

15
<html> 
<head> 
<script src="http://closure-library.googlecode.com/svn/trunk/closure/goog/base.js" type="text/javascript"></script> 
<script language="JavaScript"> 
    goog.require('goog.style'); 
</script> 
</head> 
<body> 
    <div id="myElement">test</div> 
</body> 
</html> 
<script> 
    goog.style.setStyle(goog.dom.$("myElement"), "display", "none"); 
    // or 
    goog.style.showElement(goog.dom.$("myElement"), false); 
</script> 
+5

selon ce que les gens disent sur le groupe de fermeture, les fonctions $ seront probablement supprimées au profit des fonctions de style goog.dom.getElement (« ») de MyElement – Evgeny

+0

Cette approche est maintenant obsolète, comme ci-dessous :) – Nick

4

Une autre option est

var = ela goog.dom.getElementByClass ('sdf');

goog.style.showElement (ela, true) // élément show

goog.style.showElement (ela, Fals e) // élément cache

+4

Ceci est obsolète. Utilisez setElementShown() à la place. – jdbertron

4

Selon le plus récent official documentation here, ce qui suit est recommandé pour setStyle:

Définit une valeur de style sur un élément. ... Si possible, utilisez des API natives: elem.style.propertyKey = 'value' ou (si les anciens styles sont oblitérés ) elem.style.cssText = 'property1: value1; property2: value2 '.

Ceci suggère goog.dom.getElement('myElement').style.display = 'block'; comme dans votre question.

Il est également utile de noter que si vous utilisez showElement, la définition du second argument à true renverra l'élément à default style. Comme il est dit:

True pour rendre l'élément dans son style par défaut, false pour désactiver rendant l'élément.

Ce que cela signifie, cependant, est que si vous définissez display: none dans votre CSS, mise true encore ne montre l'élément parce que le style par défaut CSS est de cacher l'élément !! C'est différent de, disons, avec jQuery.

Pour basculer, vous pouvez le faire:

var el_style = goog.dom.getElement('myElement').style; 
el_style.display = (el_style.display === "none" ? "block" : "none"); 
+0

Le lien "documentation officielle ici" semble maintenant cassé. – jochen