如何在谷歌关闭中隐藏/显示 dom 元素答案

【问题标题】：how to hide/show dom element in google closure如何在谷歌关闭中隐藏/显示 dom 元素
【发布时间】：2009-12-23 19:34:25
【问题描述】：

domA.style.display = "none"; domA.style.display = "块；

我在库中找不到这样的函数，但我想他们一定有它。

【问题讨论】：

标签： google-closure google-closure-library

【解决方案1】：

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

【讨论】：

根据闭包组的人所说，$ 函数可能会被删除以支持 goog.dom.getElement('myElement') 样式函数
这种方法现在已经过时了，如下:)

【解决方案2】：

另一种选择是

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

goog.style.showElement(elA, true) // 显示元素

goog.style.showElement(elA, false) // 隐藏元素

【讨论】：

已弃用。请改用 setElementShown()。

【解决方案3】：

根据最近的official documentation here，推荐setStyle如下：

设置元素的样式值。 ... 如果可能，请使用本机 API： elem.style.propertyKey = 'value' 或（如果删除旧样式是很好) elem.style.cssText = 'property1: value1;属性2：值2'。

这将在您的问题中建议goog.dom.getElement('myElement').style.display = 'block';。

还需要注意的是，如果您使用showElement，将第二个参数设置为true 会将元素返回到它的default style。正如它所说：

true 以默认样式呈现元素，false 禁用渲染元素。

这意味着，如果你在 CSS 中设置 display: none，设置 true 仍然不会显示元素，因为 CSS 默认样式是隐藏元素！这与 jQuery 不同。

要切换，您可以这样做：

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

【讨论】：

“这里的官方文档”链接现在好像坏了。