динамически применять стиль CSS к определенным элементам

У меня есть div с параграфами внутри:

<div>
  <p>...</p>
  <p>...</p>
</div>

Я хочу динамически применять определенный стиль к абзацам внутри этого div. Возможно ли сделать это, не обрабатывая каждый элемент абзаца, а просто прикрепив каким-либо образом стиль к элементу div, и все внутренние абзацы будут затронуты?

Может быть, с jquery.

Для меня это звучит как динамическое изменение таблицы стилей, возможно?

Правильная рекомендация в комментариях к ответу.

Благодарю.

Ответы на вопрос(4)

Решение Вопроса

Без использования классов:

/* using CSS */
div p {
    color: #ff0000;
}

// using jQuery
$("div p").css({
    color : "#ff0000"
});

С занятиями для<p> элементы:

<!-- HTML -->
<div>
    <p class="mypar">...</p>
    <p class="mypar">...</p>
</div>

/* using CSS */
div p.mypar {
    color: #ff0000;
}

// using jQuery
$("div p.mypar").css({
    color : "#ff0000"
});

С занятиями для<div> элемент:

<!-- HTML -->
<div class="mydiv">
    <p>...</p>
    <p>...</p>
</div>

/* using CSS */
div.mydiv p {
    color: #ff0000;
}

// using jQuery
$("div.mydiv p").css({
    color : "#ff0000"
});
 WHITECOLOR26 июн. 2012 г., 11:27
Благодарю. Я понимаю, как это сделать с помощью селектора jquery и css, но это повлияет только на существующие абзацы, и если я буду добавлять их динамически, новые не будут затронуты - и я хочу, чтобы они были. Это возможно с помощью таблицы стилей CSS, примененной к элементу, но возможно ли изменить таблицу стилей CSS?
 WHITECOLOR26 июн. 2012 г., 11:47
1) поскольку стили являются динамическими 2) я пытаюсь найти более быстрый (с точки зрения времени выполнения) способ сделать это.
 26 июн. 2012 г., 11:29
CSS отлично подойдет для динамически добавляемых элементов. Случай JavaScript должен быть запущен снова, чтобы присоединить стили к новым элементам.
 WHITECOLOR26 июн. 2012 г., 11:35
Так что не возможно делать то, что я хочу? Изменить стиль CSS и автоматически применить к нему все новые добавленные элементы определенного типа?
 26 июн. 2012 г., 11:41
@ WHITECOLOR: это возможно, но обычно это не требуется. Почему вы не можете просто использовать CSS для установки стиля или запустить.css() вызывать всякий раз, когда новые пункты добавляются?

Используя CSS:

div p {your style goes here}

JQuery:

$('div p').css('property', 'value');

Вы можете применить CSS динамически для этого вашего примера следующим образом:

function applyCSS()
{
    $("div > p").css({
        "background": "#fff",
        "color": "#000"
    });
}

Или, когда вы хотите применить это, когда страница загружается:

$(document).ready(function(){
    applyCSS();
});

С помощью CSS вы можете определитьвыбор ребенка.

Опираясь на это, вы можете динамически добавлять / удалять класс стилей к вашемуdiv и стиль будет применяться к дочерним элементам, указанным в этом селекторе.

Допустим, вы хотите применить это к конкретномуdiv, не любой / каждый. Так дайте цельdiv идентификатор:

<div id='foo'>
  <p>...</p>
  <p>...</p>
</div>

Добавление динамического стиля с простым JavaScript:

document.getElementById('foo').style.className='dynamic_style'

CSS (используяобъединенный идентификатор и класс на детском селекторе):

div#foo.dynamic_style > p { /* your style definition*/ }
 26 июн. 2012 г., 11:52
Вы не используетеdefine стиль динамически, выapply стиль динамически. Итак, определите стиль статически в вашем CSS. Примените стиль динамически, добавив className к элементу документа с помощью Javascript.
 WHITECOLOR26 июн. 2012 г., 11:59
Хорошо, спасибо =) только в моем случае невозможно определить стиль статически.
 WHITECOLOR26 июн. 2012 г., 11:44
Если я должен сочинять стиль во время выполнения? & quot; размер шрифта: 21 пикселей; margin: 12px ", у меня нет" dynamic_style " определено в файле CSS.

Ваш ответ на вопрос