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

Question

У меня есть DIV с пунктами внутри:

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

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

Возможно с jquery.

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

---

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

Спасибо.

Answer 1

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

/* 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" 
}); 

Answer 2

Использование CSS:

div p {your style goes here} 

JQuery:

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

Answer 3

С помощью CSS можно определить child selector.

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

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

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

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

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

CSS (с использованием combined id and class на селекторе ребенка):

div#foo.dynamic_style > p { /* your style definition*/ } 

Answer 4

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

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

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

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

Answer 5

Изменение CSS динамически будет столь же просто, как изменение названия верхнего класса уровня, например

.class1 { 
background-color:#F00; 
} 

.class1 p { 
    color:#00F; 
} 

.class2 { 
    background-color:#00F; 
} 

.class2 p { 
color:#F00; 
}​ 

тогда jQuery будет

$(document).ready(function() { 
    $('#test').click(function() { 
     $('#toggleme').toggleClass('class1'); 
     $('#toggleme').toggleClass('class2'); 
    }); 
});​ 

Все ниже класса изменит его новый стиль :)

fiddle

Answer 6

я думаю, что ГЭС говорить о динамическом изменении Див, который, даже если они существуют статически, когда JavaScript «заполняет» их на самом деле воссоздает их и поэтому css не «прилипает», потому что css уже загружен, и теперь этот новый элемент, независимо от того, у класса нет назначенного ему прослушивателя событий.

вроде как, когда вы должны использовать .он (нажмите

.on('click', '.className', function() { } 

довольно уверен, что ГЭС ищет то же самое, что и я, в «при загрузке найти это имя класса, а затем применить к нему .css»

у меня есть элементы, которые загружаются динамически, а затем должны быть установлены после того, как они загружены и после остальной части страницы CSS уже загружены

что-то вроде:.

.on('load', 'div.className', function() { do some css??? }