Как применить CssClass к серии похожих объектов с другим идентификатором

Question

У меня есть большое приложение, в котором у меня много кнопок Submit - Delete - Cancel - Add и ..Все они используют один и тот же .Button CssClass.

Я решил добраться до интерфейса так, чтобы я хотел различать интерфейс кнопок.

Как применить CSSClass к серии похожих объектов с помощьюдругой идентификатор

У меня должен быть аналогичный интерфейс удаления / отправки / отмены или ... интерфейса кнопок во всем приложении

Все идентификаторы кнопок удаления имеют btnDelete и одинаковы для остальных.(btnSubmit - btnCancel ...)

Обратите внимание, что они являются управляющими Asp, так что только последняя часть их имени btnDelete или ... и перед именем у вас есть идентификатор клиента, например (MainPage_MainControl_TheSimpleForm_btnDelete)

Answer 1

И если вам нужно сделать это программно во время выполнения, вы всегда можете использовать JQuery и метод AddClass . Чтобы обработать частичное совпадение идентификатора, взгляните на документацию Attribute Contains.

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

Answer 2

Используйте общий класс, который вы объявили:

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

Если вы хотите выбрать групповые кнопки, вы можете добавить больше стилей, разделенных пробелом.

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

CSS

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

Edit:

После уточнения нам нужно добавить классы без изменения исходного HTML. Как насчет зацикливания элементов и назначения дополнительного класса в зависимости от идентификатора.

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 3

Чистый способ CSS сделать это - селектор подстроки :

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

Они соответствуют любым элементам с атрибутом id, который заканчивается на btnDelete, btnSubmit и btnCancel соответственно.К сожалению, они не поддерживаются IE8, поэтому вам нужно иметь запасной вариант jQuery.