将 CSS 应用于 dijit 按钮答案

【问题标题】：applying css to dijit button将 CSS 应用于 dijit 按钮
【发布时间】：2010-06-16 10:07:24
【问题描述】：

我有以下 HTML 和 CSS：

<button id="myBtn" dojoType="dijit.form.Button">Testing</button>

#myBtn {
    margin-left: 100px;
}

CSS 应该按下100px 中的按钮。但由于 dijit 在按钮周围应用了一些额外的 HTML 层，因此按钮获得了 100px 填充。

编辑：找到一个（不兼容 IE6）解决方案：

[widgetid=myBtn] { margin-left: 100px; }

【问题讨论】：

标签： css dojo

【解决方案1】：

见上文 :-) 用 DIV 包围并在静态 CSS 中使用该 DIV。

我认为使用 HTML 进行装饰实际上可能比尝试在小部件或小部件的模板中添加更多内容更简单。

【讨论】：

【解决方案2】：

不要通过 ID 应用样式，而是通过类来实现。

样式表：

.myBtn { margin-left: 100px; }

代码：

<button class="myBtn" dojoType="dijit.form.Button" id="myBtn">Testing</button>

【讨论】：

【解决方案3】：

在这种情况下，您不应将 margin-left 添加到按钮本身，而是添加到已创建的按钮周围的附加 HTML 中。试试这个：

.dijitLeft{
    margin-left: 100px;
}

但这确实会为每个按钮添加一个边距。如果您不希望这样，请在创建附加 HTML 后使用 JavaScript 将边距添加到父跨度。

【讨论】：

不过，这太痛苦了。解析器中是否有任何选项可以告诉我在将 HTML 元素应用到原始元素周围时将 id 属性移动到最顶层？
不，很遗憾没有。使用 CSS 获取具有特定子节点的元素甚至没有任何变化。但是由于您已经使用了 JS 框架，因此将 CSS 分配给该框架应该没有问题。但由于我不了解dojo框架，所以无法告诉你函数是如何调用的。
dojo.style() 将动态分配样式。也许您也可以将您的按钮放在带有 ID 或类的 HTML 元素中，并在静态样式规则中使用它。
@peller：将按钮移动到带有 ID 的元素中是个好主意！比使用 dojo.style() 后按钮不会“跳转”。
@peller 是的，这个想法确实在我脑海中闪过，我只是希望有一种更好、更少“无用”的方法。我现在必须用“无用”<div> 或 <span> 围绕每个按钮...但这比在所有按钮上使用 javascript 更好。

【解决方案4】：

内联样式有效。

<button id="myBtn" dojoType="dijit.form.Button" style="margin-left:100px">Testing</button>

【讨论】：