domA.style.display = "none"; domA.style.display = "block;
I could not find such functions in the libr开发者_运维问答ary, but I guess they must have it somewhere.
<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
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");
精彩评论