如何设置程序化 dijit.form.select 的下拉菜单的样式答案

【问题标题】：How to style the drop down menu of a programmatic dijit.form.select如何设置程序化 dijit.form.select 的下拉菜单的样式
【发布时间】：2016-05-23 04:21:55
【问题描述】：

我的问题类似于this

不同的是我的dijit.form.Select中没有id。 id 是 dojo 自己分配的。那么如何实现链接问题中的结果呢？

编辑：我可以将自定义类添加到dijit.form.Select

我能想到的一种方法是使用类似的方法：

div[dijitpopupparent ^= "dijit_form_Select"] > .dijitMenu{
   ...
}

这将像 CSS 的正则表达式一样工作。但它会将 CSS 应用于整个应用程序中我不想要的所有 dijit.form.Select 元素。

【问题讨论】：

标签： javascript css dojo css-selectors dijit.form

【解决方案1】：

您提到可以将特定类添加到您的 dijit.form.Select ，例如添加 .myClass （我们稍后将使用它）然后创建将应用于 div 弹出窗口的特定 css

CSS

.stylePopup {
    max-height: 25px;
    overflow-y: scroll !important;
    border:1px solid #f00;
    /* other styles tuff ... */
}

然后你将把这个类添加到dijit.form.Select 的弹出 div 中，它以编程方式具有上述类，通过循环遍历所有 dijit，而不是 dijit 有一个“myClass”类，然后将stylePopup 类附加到它的弹出 div （代码是 Dojo AMD 风格 1.7+）

require([
    "dojo/ready",
    "dijit/registry",
    "dojo/dom",
    "dojo/_base/array",
    "dojo/dom-class"
], function(
    ready,
    registry,
    dom,
    array,
    domClass
) {

ready(function() {
  var selectDijitClass = "myClass";
  var classToApply = "stylePopup";

  array.forEach(registry.toArray(),function(widget){
    console.log(widget);
    if(widget.declaredClass === "dijit.form.Select" && widget.class === selectDijitClass){
      console.log(registry.byId(widget.id+"_menu").domNode.parentNode);
      widget.on("click",function(e){
        e.preventDefault();
        if(dom.byId(this.id+"_dropdown")){
            if(!domClass.contains(dom.byId(this.id+"_dropdown"), classToApply))
                domClass.add(dom.byId(this.id+"_dropdown"),classToApply);
        }

      });
    }
  });

});  
});

这是Fiddle

【讨论】：

您所说的是真实的，仅对您提到的示例有效。但就我而言，还有更多小部件，dijit.form.Select 和 dijitPopup 的小部件 NOT 相邻。他们是非常非常分离的。
为什么不加个Id，不然就得做程序化解决方案了！
据我所知，在 postCreate 中，您正在使用类迭代所需的 dijit.form.Select 元素，并将类应用于与它们关联的 dijitPopup 小部件。正确的？我也想到了这一点，但这对我来说不是一个理想的解决方案。无论如何，感谢您的帮助！ :)
是的，我正在这样做，但不是在 postcreate 中，只是当您单击 select 时。我同意这是不合适的，但是如果不为每个选择添加特定 ID 或使用编程方法，您就不能在特定选择上应用样式，欢迎 :)
回复您之前关于为什么无法添加 id 的评论。这是因为有很多小部件是以编程方式创建的，考虑到它是一个单页应用程序，给所有小部件分配 id 是没有意义的。我们正在改进我们的应用程序并避免将 id 分配给小部件。感谢您的帮助和建议！ :)