javascript 设置 Dojo 按钮的宽度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6771228/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Setting Width For Dojo Button
提问by Gaurav
Note: It is related to this question.
注意：它与这个问题有关。
I am trying to create a dojo button programmatically like this:
我正在尝试以编程方式创建一个 dojo 按钮，如下所示：
var btnOK = new dijit.form.Button({
label: "OK",
showLabel: true,
style: "height: 20px; width: 50px;"
});
Now even though I specify the width, while displaying the button width is set to minimum (i.e text + margin). The reason as explained in the answeris that dojo overrides css style for button (class="dijitButtonNode"). Further (in the same answer) the width is set by overriding styles for same class.
现在即使我指定了宽度，同时显示按钮的宽度设置为最小值（即文本 + 边距）。答案中解释的原因 是 dojo 覆盖了按钮 ( class="dijitButtonNode") 的css 样式。此外（在同一个答案中）宽度是通过覆盖同一类的样式来设置的。
Is it possible to do same (i.e set the width) without this css workaround ?
如果没有这个 css 解决方法，是否可以做同样的事情（即设置宽度）？
回答by Gaurav
Finally, I worked it out. To set the width we have to set width using dojo.style function
最后，我解决了。要设置宽度，我们必须使用 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");
回答by Mikhail
Worked for me:
对我来说有效：
domStyle.set(btnOk.domNode, "width", "100px");
domStyle.set(btnOk.domNode.firstChild, "display", "block");
回答by GuyT
Another possible solution is to add a class to the button:
另一种可能的解决方案是向按钮添加一个类：
<input type="button" data-dojo-props="label : 'Test'" class="normalButton" id="test" data-dojo-type="dijit/form/Button" />
In your CSS:
在你的 CSS 中：
.normalButton span{
width: 100px;
}
Extra: if you add this class your alignment of the text will be messed up. This can be solved by adding following CSS rules:
额外：如果你添加这个类，你的文本对齐方式将会混乱。这可以通过添加以下 CSS 规则来解决：
.{your theme: eg. tundra} .dijitButtonText{
padding: 0;
}
Finally, check out my fiddle.
最后，看看我的小提琴。
回答by kxo
Full width button: https://jsfiddle.net/51jzyam7/
全宽按钮：https: //jsfiddle.net/51jzyam7/
HTML:
HTML：
<body class="claro">
<button id="myButtonNode" type="button"></button>
</body>
JS:
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:
CSS：
.dijitButton.myCSSClass{
display: block;
}
.dijitButton.myCSSClass .dijitButtonNode{
width:100%;
}
