9

domA.style.display = "none"; domA.style.display = "block;

I could not find such functions in the library, but I guess they must have it somewhere.

Nickolay
  • 31,095
  • 13
  • 107
  • 185
romerun
  • 2,161
  • 3
  • 18
  • 25

3 Answers3

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>
andres descalzo
  • 14,887
  • 13
  • 64
  • 115
  • 5
    according to what folks say on closure group, $ functions will probably be removed in favor of goog.dom.getElement('myElement') style functions – Evgeny Feb 21 '10 at 16:21
  • This approach is now outdated, as below :) – Nick Jan 13 '14 at 03:05
5

Another option is

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

goog.style.showElement(elA, true) // show element

goog.style.showElement(elA, false) // hide element

mefallit
  • 106
  • 1
  • 4
4

According to the more recent official documentation here, the following is recommended for setStyle:

Sets a style value on an element. ... When possible, use native APIs: elem.style.propertyKey = 'value' or (if obliterating old styles is fine) elem.style.cssText = 'property1: value1; property2: value2'.

This would suggest goog.dom.getElement('myElement').style.display = 'block'; as in your question.

It's also helpful to note that if you use showElement, setting the second argument to true will return the element to its default style. As it says:

True to render the element in its default style, false to disable rendering the element.

What this means, though, is that if you set display: none in your CSS, setting true still won't show the element because the CSS default style is to hide the element!! This is different than, say, with jQuery.

To toggle, you can do this:

var el_style = goog.dom.getElement('myElement').style;
el_style.display = (el_style.display === "none" ? "block" : "none");
Nick
  • 5,995
  • 12
  • 54
  • 78