Javascript - Применение класса к тегу HTML с заданным атрибутом / значением

Question

Я пытаюсь динамически применять стили к тегам HTML, считывая значения определенных атрибутов HTML и применяя имя класса на основе их значений. Например, если у меня есть:

<p height="30">

Я хочу применить class="h30" к этому абзацу, чтобы я мог оформить его в своей таблице стилей. Я не могу найти информацию о получении значения атрибута, который не является id или class. Помощь

Answer 1

Я бы настоятельно рекомендовал использовать что-то вроде jquery, где добавление классов тривиально:

$("#someId").addClass("newClass");

так в вашем случае:

$("p[height='30']").addClass("h30");

, поэтому выбираются все теги абзаца, где атрибут высоты равен 30, и добавляется класс h30.

Answer 2

См .: getAttribute () . Параметр - это имя атрибута (без учета регистра). Возвращаемое значение - это значение атрибута (строка).

Обязательно посмотрите Замечания в MSDN, прежде чем иметь дело с IE ...

Answer 3

Лучше разделить макет и презентацию.

Несмотря на использование CSS, вы связываете их вместе. Используйте лучшие имена классов (почему он должен иметь высоту 30px? Это menubar? Footer? Banner?)

Answer 4

Атрибуты - это просто свойства (обычно). Так что просто попробуйте:

for (e in ...) {
    if (e.height == 30) {
        e.className = "h30";
    }
}

Или используйте что-то вроде jquery, чтобы упростить подобные вещи.