问题如何向dojo小部件添加类？

我想在下面的小部件中添加多个类以用于样式目的：

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>

6161

2017-11-09 20:41

起源

答案:

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

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

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

2017-11-09 20:45

所以它将是dojo.addClass（filteringSelect.test，“ClassName”）;或者它是输入标签？ - Amen

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

此外，filteringSelect提供了对dijit小部件的引用，该小部件为您提供了一堆dijit API方法 - 而不是实际的HTML DOM元素。 - linusthe3rd

所以我会是dojo.addClass（filteringSelect.input，“ClassName”）;正确？ - Amen

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

答案:

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

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

2017-11-09 20:45

所以它将是dojo.addClass（filteringSelect.test，“ClassName”）;或者它是输入标签？ - Amen

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

此外，filteringSelect提供了对dijit小部件的引用，该小部件为您提供了一堆dijit API方法 - 而不是实际的HTML DOM元素。 - linusthe3rd

所以我会是dojo.addClass（filteringSelect.input，“ClassName”）;正确？ - Amen

更多工作方法：

（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）您可以设置窗口小部件的dojo属性，如下所示：

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

2018-01-22 14:12

问题 如何向dojo小部件添加类？

答案:

答案:

热门问题

问题如何向dojo小部件添加类？