如何为单个 Dojo 按钮着色？

Question

有没有办法影响单个 Dojo 按钮的颜色？我希望能够覆盖特定按钮的默认按钮颜色。在 JSP 标记中，我有一个这样定义的按钮：

<button class="jelam-button-blue" data-dojo-type="dijit/form/Button" data-dojo-id="usdotSearchButton" id="usdotSearchButton" type="button" onClick="csfController.usdotSearch()">Search</button>

其中 "jelam-button-blue" 在我们的 css 文件中定义如下：

.jelam-button-blue {
    background-color: #5494c7 !important;
    background-image: none !important;
    border: 1px solid #a6cdec !important;
    border-radius: 0 !important;
    color: #ffffff !important;
    height: 38px;
}
.jelam-button-blue .dijitReset.dijitInline.dijitButtonText {
    font-size: 16px;
    font-weight: normal !important;
    position: relative;
    top: 2px;
}

这并没有像我希望的那样使按钮变成蓝色。从按钮标记生成的标记是：

<span role="presentation" class="dijit dijitReset dijitInline dijitButton" widgetid="usdotSearchButton">
  <span role="presentation" data-dojo-attach-event="ondijitclick:__onClick" class="dijitReset dijitInline dijitButtonNode">
    <span aria-labelledby="usdotSearchButton_label" role="button" data-dojo-attach-point="titleNode,focusNode" class="dijitReset dijitStretch dijitButtonContents" tabindex="0" id="usdotSearchButton" style="-moz-user-select: none;">
      <span data-dojo-attach-point="iconNode" class="dijitReset dijitInline dijitIcon dijitNoIcon"></span>
      <span class="dijitReset dijitToggleButtonIconChar">●</span>
      <span data-dojo-attach-point="containerNode" id="usdotSearchButton_label" class="dijitReset dijitInline dijitButtonText">Search</span>
    </span>
  </span>
  <input type="button" data-dojo-attach-point="valueNode" role="presentation" tabindex="-1" data-dojo-attach-event="onclick:_onClick" class="dijitOffScreen" value="">
</span>

并且生成的标记不包含对我指定的 "jelam-button-blue" class 的任何引用。

我从本地主题中包含 dojo 模块，在包含 dojo.js 之前定义 dojoConfig 变量，如下所示：

<script>
var dojoConfig = {
    baseUrl: "/CompassThemesURS/themes/html/commonurs/",
    async: false, // to support older pre-AMD IBM modules
    tlmSiblingOfDojo: false,  
    packages: [
        { name: "gridx", location: "dojo/gridx-1.3.0" },
        { name: "dojo",  location: "dojo/1.9.1/dojo" },
        { name: "dijit", location: "dojo/1.9.1/dijit" },
        { name: "dojox", location: "dojo/1.9.1/dojox" },
        { name: "commonjs", location: "js" }
    ]
};
</script>
<script src="/CompassThemesURS/themes/html/commonurs/dojo/1.9.1/dojo/dojo.js.uncompressed.js"
               data-dojo-config="isDebug:true, parseOnLoad: false"></script>

有没有办法只把指定的按钮变成指定的颜色？谢谢

Answer 1

您必须更新 dijitButtonNode 颜色。

我将你的 css 更改为：

.jelam-button-blue .dijitButtonNode {
background-color: #5494c7 !important;
background-image: none !important;
border: 1px solid #a6cdec !important;
border-radius: 0 !important;
color: #ffffff !important;

}

http://jsfiddle.net/theinnkeeper/eyLewa1n/2/

如何为单个 Dojo 按钮着色？

How to color a single Dojo button?

html

css

dojo