如何将CssClass应用于具有不同ID的一系列类似对象

Question

我有一个大型应用程序，其中有很多提交 - 删除 - 取消 - 添加和..按钮。所有这些都使用相同的.Button CssClass。

我决定到达界面，以便我想要区分按钮界面。

如何将CSSClass应用于具有不同ID的一系列类似对象

我应该在整个应用程序中有类似的删除/提交/取消或...按钮界面

所有删除按钮ID都是btnDelete，其余部分都是相同的。 （btnSubmit - btnCancel ...）

请注意，它们是Asp控件，因此只有它们名称的最后一部分是btnDelete或...而在Name之前，您有一个客户端ID，如（MainPage_MainControl_TheSimpleForm_btnDelete）

Answer 1

使用您声明的公共类：

.Button {
  /* applies to all buttons */
}

如果要选择组按钮，可以添加由空格分隔的更多样式。

<button class="Button AddButton" id="AddButton1">Add</Button>

CSS

.AddButton {
  /* only applies to add buttons */
}

修改

在澄清之后，我们需要在不更改原始HTML的情况下添加类。如何循环遍历元素并根据id分配其他类。

var buttons = document.getElementsByTagName('button');

for (var i = 0; i < buttons.length; i++) {
    var btn = buttons[i];
    if (btn.id.indexOf('btnAdd') > 0) {
       btn.className = btn.className + ' ButtonAdd'; // the space is important
    } else if (btn.id.indexOf('btnDelete') > 0) {
       btn.className = btn.className + ' ButtonDelete'; // the space is important
      ...
    }
}

Answer 2

如果您需要在运行时以编程方式执行此操作，则可以始终使用JQuery和AddClass方法。要处理部分ID匹配，请查看Attribute Contains documentation.

$('[ID*="btnDelete"]').AddClass("newCSSClassToAdd")

Answer 3

纯CSS的方法是substring selector：

[id$="btnDelete"] { /* delete button styles */ }
[id$="btnSubmit"] { /* submit button styles */ }
[id$="btnCancel"] { /* cancel button styles */ }

这些符合id属性的所有元素都分别以btnDelete，btnSubmit和btnCancel结尾。不幸的是IE8不支持这些，所以你需要有一个jQuery后备。