Dojo 程序化 Button 比声明式 Button 更短？

Question

我是运行 Dojo1.9.1，我注意到在一个页面上，我在以编程方式生成的按钮旁边修复了按钮，编程按钮更短。我已经在 jsfiddle https://jsfiddle.net/gregorco/6sn6998t/3/

上重现了这个问题

HTML:

<div id="testDiv">
    <table>
        <tr>
            <td>
                <div id="divForProgButton"></div>
            </td>
            <td>
                <div>
                    <button data-dojo-type="dijit/form/Button" data-dojo-id="declaredButton" id="declaredButton" type="button">Declarative Button two pixels taller??</button>
                </div>
            </td>
        </tr>
    </table>
</div>

JAVASCRIPT:

require(["dojo/dom",
"dojo/parser", "dojo/dom-construct", "dijit/form/Button", "dojo/ready"], function (dom, parser, domConstruct, Button, ready) {
ready(function () {
    parser.parse("testDiv");
    var buttonsDiv = dom.byId("divForProgButton");
    var progButton = new Button({
        'id': 'programmaticButton',
            'name': 'programmaticButton',
            'innerHTML': 'Programmatic Button'
    });
    domConstruct.place(progButton.domNode, buttonsDiv);
    progButton.startup();
});
});

它很微妙，但您可以看到（以及用 Firebug 确认）第一个按钮更短。这里它只短了 2 个像素，但在我的系统上它短了 4 个像素 - 更明显。我已经尝试过 claro 和 tundra 主题，并且都产生了相同的高度差异。

检查生成的 HTML 和 Firebug 表明声明性 Button 包含 HTML 以支持从未实际显示的图标。编程按钮不生成此类图标相关 HTML。不确定这会如何导致声明性 Button 更高，但我看不出有任何其他区别。

有人理解编程式 Button 和声明式 Button 之间的这种差异吗？如何避免这种差异？

感谢您提供的任何帮助。

谢谢。

Answer 1

您能否尝试在以编程方式创建按钮时将 innerHTML 替换为 label。

var progButton = new Button({
        'id': 'programmaticButton',
            'name': 'programmaticButton',

            /* 'innerHTML': 'Programmatic Button' */
            'label': 'Programmatic Button'
    });

我做了修改，现在看起来按钮的高度是一样的。

我的假设是 innerHTML 正在覆盖由 Dojo Dijit Machinery 创建的 HTML 片段。因此，您在程序化版本中看不到图标节点。

Dojo 程序化 Button 比声明式 Button 更短？

Dojo programmatic Button shorter than declarative Button?

html

javascript

dojo

button

programmatically-created