如何将类添加到 dojo 小部件？

Posted 2023-02-16

【中文标题】如何将类添加到 dojo 小部件？

【英文标题】：How do I add a class to a dojo widget?

【发布时间】：2010-11-09 20:41:42

【问题描述】：

我想为下面的小部件添加多个类以进行样式设置：

var filteringSelect = new dijit.form.FilteringSelect(
    id: "test",
,
"test");

我将如何做到这一点？

这是实际的html：

 <div tabindex="-1" wairole="combobox" dojoattachpoint="comboNode" dojoattachevent="onmouseenter:_onMouse,onmouseleave:_onMouse,onmousedown:_onMouse" id="widget_test" class="dijit dijitReset dijitInlineTable dijitLeft dijitComboBox" role="combobox" widgetid="test">
        <div style="overflow: hidden;">
            <div dojoattachevent="onmousedown:_onArrowMouseDown,onmouseup:_onMouse,onmouseenter:_onMouse,onmouseleave:_onMouse" wairole="presentation" dojoattachpoint="downArrowNode" class="dijitReset dijitRight dijitButtonNode dijitArrowButton dijitDownArrowButton" role="presentation">
                <div class="dijitArrowButtonInner">
                    &thinsp;
                </div>
                <div class="dijitArrowButtonChar">
                    ▼
                </div>
            </div>
            <div class="dijitReset dijitValidationIcon">
                <br>
            </div>
            <div class="dijitReset dijitValidationIconText">
                Χ
            </div>
            <div class="dijitReset dijitInputField">
                <input type="text" waistate="haspopup-true,autocomplete-list" wairole="textbox" dojoattachpoint="textbox,focusNode" dojoattachevent="onkeypress:_onKeyPress,compositionend" class="dijitReset" autocomplete="off" role="textbox" aria-haspopup="true" aria-autocomplete="list" aria-invalid="false" id="test" tabindex="0" aria-required="true" value="United States"><input type="text" style="display: none;" name="">
            </div>
        </div>
    </div>

【参考方案1】：

dojo.addClass(filteringSelect.domNode, "yourClass");

这还可以处理 DOM 节点已经包含“youClass”作为 CSS 类的情况，这样就不会添加重复项。 dojo 还提供了其他方法来使用 dojo.removeClass() 和 dojo.toggleClass() 来处理 CSS 类管理。

http://staging.dojotoolkit.org/reference-guide/dojo/addClass.html

【讨论】：

所以应该是 dojo.addClass(filteringSelect.test, "ClassName");还是输入标签？

不，你应该做 filteringSelect.domNode 因为 domNode 属性提供了对 HTML 中实际 DOM 节点的引用。 filterSelect.test 会导致 NPE。

另外，filteringSelect 提供了对 dijit 小部件的引用，它为您提供了一系列 dijit API 方法 - 而不是实际的 HTML DOM 元素。

所以我应该是 dojo.addClass(filteringSelect.input, "ClassName");对吗？

不，使用 filterSelect.domNode 因为输入不是 dijit.form.FilteringSelect (api.dojotoolkit.org/jsdoc/1.3/dijit.form.FilteringSelect) 的属性。此外，有时小部件会完全改变它们应用到的原始节点，因此您的“测试”节点在实例化后甚至可能不存在。

【参考方案2】：

进一步的工作方法：

(1) 程序化版本，从脚本创建小部件：

var filteringSelect = new dijit.form.FilteringSelect(
    id: "test",
    class: "myClassName"
,
"test");

(2) 如果你只设置“class”属性，它会在dijit/_WidgetBase.js中调用setter函数_setClassAttr，这正是你想要的：

<div data-dojo-type="dijit/form/SomeThing" class="myClassName"></div>

(3) 可以设置widget的dojo属性，如下：

<div data-dojo-type="dijit/form/SomeThing" data-dojo-props="class: 'myClassName'"></div>