设置 Dojo 按钮的宽度
Posted
技术标签:
【中文标题】设置 Dojo 按钮的宽度【英文标题】：Setting Width For Dojo Button 【发布时间】：2011-07-21 04:23:14 【问题描述】：注意：与this question有关。
我正在尝试像这样以编程方式创建一个 dojo 按钮：
var btnOK = new dijit.form.Button(
label: "OK",
showLabel: true,
style: "height: 20px; width: 50px;"
);
现在，即使我指定了宽度，但显示按钮的宽度设置为最小（即文本 + 边距）。 answer 中解释的原因是 dojo 覆盖了按钮 (class="dijitButtonNode") 的 css 样式。此外（在同一个答案中）宽度是通过覆盖同一类的样式来设置的。
如果没有这个 css 解决方法，是否可以做同样的事情（即设置宽度）？
【问题讨论】：
【参考方案1】：最后，我解决了。要设置宽度，我们必须使用 dojo.style 函数设置宽度
dojo.create("button",id: "btnOK",type: "button",dojo.body());
var btnOK = new dijit.form.Button(
label: "OK",
showLabel: true,
style: "height: 20px;"
,
"btnOK");
dojo.style("btnOK","width","40px");
【讨论】：
当您自己解决问题时，您可以接受自己的答案 - 有助于将其排除在未解决的队列中。【参考方案2】：为我工作：
domStyle.set(btnOk.domNode, "width", "100px");
domStyle.set(btnOk.domNode.firstChild, "display", "block");
【讨论】：
您可以通过提供一些上下文来改进您的答案——为什么这样会起作用？有参考文件吗？ 以上代码有效，但如何设置高度？ domstyle.set(btnOk.domNode, "height", "30px") 不起作用【参考方案3】：另一种可能的解决方案是为按钮添加一个类：
<input type="button" data-dojo-props="label : 'Test'" class="normalButton" id="test" data-dojo-type="dijit/form/Button" />
在你的 CSS 中：
.normalButton span
width: 100px;
额外：如果你添加这个类，你的文本对齐会搞砸。这可以通过添加以下 CSS 规则来解决：
.your theme: eg. tundra .dijitButtonText
padding: 0;
最后，查看my fiddle。
【讨论】：
【参考方案4】：全宽按钮：https://jsfiddle.net/51jzyam7/
html：
<body class="claro">
<button id="myButtonNode" type="button"></button>
</body>
JS：
require(["dijit/form/Button", "dojo/dom", "dojo/domReady!"],
function(Button, dom)
var myButton = new Button(
label: "My big button",
class: 'myCSSClass',
, "myButtonNode").startup();
);
CSS：
.dijitButton.myCSSClass
display: block;
.dijitButton.myCSSClass .dijitButtonNode
width:100%;
【讨论】：
以上是关于设置 Dojo 按钮的宽度的主要内容，如果未能解决你的问题，请参考以下文章