javascript 如何将类添加到 dojo 小部件？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4138388/
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
How do I add a class to a dojo widget?
提问by Amen
I want to add multiple classes to the widget below for styling purposes:
我想向下面的小部件添加多个类以进行样式设置：
var filteringSelect = new dijit.form.FilteringSelect({
id: "test",
},
"test");
How would I accomplish this?
我将如何做到这一点？
Here is the actual html:
这是实际的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">
 
</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>
采纳答案by linusthe3rd
dojo.addClass(filteringSelect.domNode, "yourClass");
This also handles the situations in which a DOM node already contains "youClass" as a CSS class so that duplicates aren't added. dojo also provides other methods to handle CSS class management with dojo.removeClass() and dojo.toggleClass().
这也处理 DOM 节点已经包含“youClass”作为 CSS 类的情况，因此不会添加重复项。dojo 还提供了其他方法来使用 dojo.removeClass() 和 dojo.toggleClass() 处理 CSS 类管理。
http://staging.dojotoolkit.org/reference-guide/dojo/addClass.html
http://staging.dojotoolkit.org/reference-guide/dojo/addClass.html
回答by peterh - Reinstate Monica
Further working methods:
进一步的工作方法：
(1) The procedural version, creating the widget from script:
(1) 程序版本，从脚本创建小部件：
var filteringSelect = new dijit.form.FilteringSelect({
id: "test",
class: "myClassName"
},
"test");
(2) If you set simply the "class" attribute, it will call in the dijit/_WidgetBase.jsthe setter function _setClassAttr, which does exactly what you want:
(2) 如果您只设置“class”属性，它将调用dijit/_WidgetBase.jssetter 函数_setClassAttr，它完全符合您的要求：
<div data-dojo-type="dijit/form/SomeThing" class="myClassName"></div>
(3) You can set the dojo properties of the widget, as here:
(3) 您可以设置小部件的 dojo 属性，如下所示：
<div data-dojo-type="dijit/form/SomeThing" data-dojo-props="class: 'myClassName'"></div>
