Dojo 编程按钮比声明按钮短？

Posted 2023-02-26

【中文标题】Dojo 编程按钮比声明按钮短？

【英文标题】：Dojo programmatic Button shorter than declarative Button?

【发布时间】：2015-03-31 18:30:04

【问题描述】：

我正在使用 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 主题，并且都产生了相同的高度差异。

使用 Firebug 检查生成的 HTML 表明声明性 Button 包含 HTML 以支持从未实际显示的图标。程序化 Button 不会生成此类与图标相关的 HTML。不知道这会如何导致声明性 Button 更高，但我没有看到任何其他区别。

任何人都理解编程按钮和声明按钮之间的这种差异，以及如何避免这种差异？

感谢您提供的任何帮助。

谢谢。

【问题讨论】：

您可以尝试在按钮的编程创建中将innerHTML 替换为label。我进行了更改，现在按钮的高度似乎相同。我的假设是 innerHTML 正在覆盖由 Dojo Dijit Machinery 创建的 HTML 片段。因此，您在编程版本中看不到图标节点。我在这里胡乱猜测。

太棒了！那行得通！我以为我已经尝试过了，但我想没有。如果您将评论更改为答案，我会很乐意接受 - 如果可以的话。到目前为止我只有8分，但我会尽可能接受。谢谢！

这个 innerHTML 给了我很多痛苦:-(。你需要非常小心。我很高兴它有帮助。

【参考方案1】：

您可以尝试在按钮的编程创建中将innerHTML 替换为label。

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

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

我进行了更改，现在按钮的高度似乎相同。

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

【讨论】：

当我获得足够的积分时，我会回来支持它 - 但我不允许获得 8 分。再次感谢。