Menu
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.
479
Style display property is used to hide and show the content of HTML DOM by accessing the DOM element using JavaScript/jQuery. To hide an element, set the style display property to “none”.
<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>
Another option is
var elA = goog.dom.getElementByClass('sdf');
goog.style.showElement(elA, true) // show element
goog.style.showElement(elA, false) // hide element
25
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");
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
