如何将 CSS 应用于 Google Closure Library 中的组件？答案

【问题标题】：How can CSS be applied to components from Google Closure Library?如何将 CSS 应用于 Google Closure Library 中的组件？
【发布时间】：2009-12-26 13:32:53
【问题描述】：

我对 Google 的 Closure Library 感到很满意。我创建了一个带有Select Widget 的简单页面，但它显然需要一些样式（元素看起来像纯文本，并且在下面的示例中，菜单项在按钮下方弹出）。

我假设库支持样式——我怎样才能融入它们？ SVN 中的每个示例页面似乎都使用了自己的 CSS。

缩写示例如下：

<body>

<div id="inputContainer"></div>

<script src="closure-library-read-only/closure/goog/base.js"></script>
<script>
    goog.require('goog.dom');
    goog.require('goog.ui.Button');
    goog.require('goog.ui.MenuItem');
    goog.require('goog.ui.Select');
</script>
<script>
    var inputDiv = goog.dom.$("inputContainer");

    var testSelect = new goog.ui.Select("Test selector");
    testSelect.addItem(new goog.ui.MenuItem("1"));
    testSelect.addItem(new goog.ui.MenuItem("2"));
    testSelect.addItem(new goog.ui.MenuItem("3"));
    var submitButton = new goog.ui.Button("Go");

testSelect.render(inputDiv);
submitButton.render(inputDiv);
</script>

</body>

【问题讨论】：

标签： javascript google-closure-library

【解决方案1】：

实际上，搜索正确的 CSS 应该从您要使用的小部件的演示页面开始。通过检查页面的 HTML，通过查找标签应该很容易识别演示所依赖的样式表。对于 goog.ui.HoverCard，hovercard.html 中的相应元素是：

<link rel="stylesheet" href="css/demo.css">
<link rel="stylesheet" href="../css/hovercard.css">

忽略 css/demo.css，它定义了 CSS 规则以确保演示页面的外观是一致的，因此 css/demo.css 中的大部分代码是特定于演示的，而不是小部件，所以它应该不包含在您的应用程序中。不要忘记查看 css/common.css，其中包含许多小部件使用的显示内联块 xbrowser 实现。

【讨论】：

【解决方案2】：

我只是使用咒语，例如（针对您的情况）：

<link rel="stylesheet" href="closure-library/closure/goog/demos/css/menubutton.css">

似乎没有更好的方法，虽然我没有找到任何解释在 demos/ 目录中包含样式的任何解释......

【讨论】：

这也是我找到的唯一解决方案。

【解决方案3】：

Closure 向 HTML 节点添加了一系列 CSS 类，并且该库提供了几个 CSS 来为组件提供样式。

我建议您查看演示的源代码并找出 css id 和类。或者使用 Firebug（用于 firefox）或 IE Developer Tools（用于 Internet Explorer 7/8）找出 id/类，然后使用您自己的 CSS 设置它们的样式。

【讨论】：