如何修改dijit/layout/TabContainer中单个标签的标签颜色？

我最近在尝试修改dijit/layout/TabContainer里某个标签的颜色，想让它和其他标签区分开，但试了好几种方法都没成功，真是头疼。

我的HTML代码是这样的：

<div data-dojo-type="dijit/layout/TabContainer" data-dojo-props="region:'center'" id="tc" > 
  <div data-dojo-type="dijit/layout/ContentPane" title="Start" id="Start" class="TabBackground"></div> 
  <!--bunch more tabs here--> 
  <div data-dojo-type="dijit/layout/ContentPane" title="Attachments" id="Attachments" class="TabProp1Fund"></div> 
  <div data-dojo-type="dijit/layout/ContentPane" title="Finish" id="Finish" class="TabBackground"></div> 
</div>

我先是试了这两段CSS代码，都没效果：

.TabProp1Fund .dijitTab .tabLabel{ /* 看元素检查器里的样式写的 */
  color:orange !important; 
}

/* 还试过这个 */
.TabProp1Fund .tabLabel{
  color:orange !important; 
}

后来又试了JS，结果dijitTab和tabLabel都显示undefined：

var TabAttachments = dojo.byId("Attachments"); 
TabAttachments.dijitTab.tabLabel.style.color="green";

我到底忽略了什么？另外其实我更想修改标签的背景颜色，有没有对应的属性可以用？

问题出在哪？ #

首先得明白Dijit的TabContainer结构：你给ContentPane加的class是在内容面板上，而不是标签本身。标签（.dijitTab）是TabContainer生成的独立元素，和ContentPane是分开的，所以你的CSS选择器根本找不到目标元素。

还有JS里的问题：dojo.byId()获取的是DOM节点，不是Dijit的widget实例，所以你没法直接访问dijitTab属性。应该用dijit.byId()来获取ContentPane的widget对象。

正确的解决方法 #

方法1：用CSS（推荐，更简洁）

你需要找到对应标签的正确选择器。TabContainer会给每个标签加一个和对应ContentPane的id相关的class，格式是dijitTabPane<ContentPane的id>。比如你的Attachments标签，对应的标签元素会有dijitTabPaneAttachments这个class。

所以修改颜色（包括文字和背景）的CSS可以这么写：

/* 修改标签文字颜色 */
.dijitTabPaneAttachments .tabLabel {
  color: orange !important;
}

/* 修改标签背景颜色 */
.dijitTabPaneAttachments {
  background-color: #f5f5f5 !important; /* 换成你想要的颜色 */
}

/* 如果要修改选中状态的背景，再加这个 */
.dijitTabPaneAttachments.dijitTabChecked {
  background-color: #e0e0e0 !important;
}

方法2：用JavaScript

如果你想用JS动态修改，步骤是：

1. 获取TabContainer的widget实例
2. 找到对应ContentPane的标签元素
3. 修改样式

代码示例：

// 获取TabContainer实例
var tabContainer = dijit.byId("tc");
// 获取Attachments的ContentPane实例
var attachmentsPane = dijit.byId("Attachments");
// 找到对应的标签节点
var tabNode = tabContainer.tablist.getTab(attachmentsPane);
// 修改文字颜色
tabNode.querySelector(".tabLabel").style.color = "green";
// 修改背景颜色
tabNode.style.backgroundColor = "#ffeeba";

补充说明 #

如果你的Dijit主题是Claro或者其他，可能需要调整选择器的优先级，比如加上主题的前缀（比如.claro .dijitTabPaneAttachments），确保你的样式能覆盖默认主题样式。

另外，如果你想在初始化时就设置样式，最好在dojo/ready回调里执行JS代码，确保所有widget都加载完成了。

内容的提问来源于stack exchange，提问作者pvitt