我在网上找不到任何答案，所以我要回答我自己的问题:如何覆盖 TooltipDialog 弹出窗口的内部填充？
挑战: 使用 dijit.TooltipDialog 时，Claro 样式表中的类 dijitTooltipContainer 分配了 6px 8px 8px 6px 的内部填充。我在同一页上使用了多个工具提示，并且只想从一个中删除此填充(因此，不想覆盖默认样式表)。这个特定的工具提示包含一个从 0 到 100 的右对齐数字的程式化无序列表，增量为 5，而来自 dijitTooltipContainer 的额外填充太多了。
不幸的是，下面的代码不起作用，只会影响父元素(并把它搞得一团糟):
var dialog = new dijit.TooltipDialog({
content: string,
style: "padding: 0;",
id: "newDialog"
},"");
答案:这是我将内部填充更改为 0 的方法(使用 JavaScript):
// Create the ToolTip
var dialog = new dijit.TooltipDialog({
content: string,
id: "newDialog"
},"");
// Open the popup
dijit.popup.open({
around: "someNode",
orient: ["below"],
popup: dialog
});
// Remove the padding from dijitTooltipContainer
// Get our main Widget node
var mainNode = document.getElementById("newDialog");
// Get all the child DIV nodes created by Dojo
var divChildren = mainNode.getElementsByTagName("div");
// Set the element padding to zero
// dijitTooltipContainer is the first child node
dojo.attr(divChildren[0], "style", {padding: "0px"});
也许其他人有更好的方法来做到这一点，但我找不到。哈。
最佳答案
当我使用 Dojo 时，我设置了一个自定义主题并同时使用 claro(或任何其他随附的)和我的自定义主题。然后，我在我的自定义主题中设置了这些覆盖中的任何一个。
<body class="claro myTheme">
所以如果我想覆盖所有工具提示，我可以在我的 css 中使用它
.myTheme .dijitTooltipContainer {
padding: 0;
}
但是你只想覆盖一个，所以你可以这样做
// Create the ToolTip
var dialog = new dijit.TooltipDialog({
content: string,
id: "newDialog"
},"");
dojo.addClass(dialog.domNode, 'noPadding');
和CSS
.myTheme .noPadding .dijitTooltipContainer {
padding: 0;
}
关于javascript - 更改 Dojo ToolTipDialog 的填充，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/9467953/