我有一个带有段落的div:
<div>
<p>...</p>
<p>...</p>
</div>
我想动态地将某个样式应用于此div中的段落。是否可以在不处理每个段落元素的情况下执行此操作,但只是将某种样式附加到div元素并且所有内部段落都会受到影响?
也许用jquery。
听起来像样式表的动态变化,是否可能?
答案评论中的正确建议。
感谢。
答案 0 :(得分:6)
不使用课程:
/* 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"
});
答案 1 :(得分:1)
使用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*/ }
答案 2 :(得分:0)
使用CSS:
div p {your style goes here}
jquery的:
$('div p').css('property', 'value');
答案 3 :(得分:0)
您可以通过以下方式为您的此示例动态应用CSS:
function applyCSS()
{
$("div > p").css({
"background": "#fff",
"color": "#000"
});
}
或者,当你想在页面加载时应用它:
$(document).ready(function(){
applyCSS();
});
答案 4 :(得分:0)
动态更改css就像更改顶级类名一样简单,例如
<div id="toggleme" class="class1">
<p>...</p>
<p>...</p>
</div>
<a id="test">Test</a>
.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');
});
});
班级以下的所有内容都将改为新的风格:)