1

我有一个 div 里面有段落：

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

我想动态地将某种样式应用于此 div 内的段落。是否可以在不处理每个段落元素的情况下做到这一点，而只是以某种方式将样式附加到 div 元素并且所有内部段落都会受到影响？

也许用jquery。

对我来说，这听起来像是样式表的动态变化，可能吗？

答案评论中的正确建议。

谢谢。

4

5 回答 5

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"
});
于 2012-06-26T09:13:18.870 回答
1

使用 CSS，您可以定义子选择器。

在此基础上，您可以动态添加/删除样式类，div并且该样式将应用于您在该选择器中指定的子项。

假设您想将此应用于特定的div，而不是任何/每个。所以给目标div一个标识符：

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

使用简单的 javascript 添加动态样式：

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

CSS（在子选择器上使用组合 id 和 class ）：

div#foo.dynamic_style > p { /* your style definition*/ }
于 2012-06-26T09:15:22.973 回答
0

使用 CSS：

div p {your style goes here}

jQuery：

$('div p').css('property', 'value');
于 2012-06-26T09:14:49.997 回答
0

您可以通过以下方式为您的示例动态应用 CSS：

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

或者，当您想在页面加载时应用它时：

$(document).ready(function(){
    applyCSS();
});
于 2012-06-26T09:15:30.663 回答
0

例如，动态更改 css 就像更改顶级类名一样简单

<div id="toggleme" class="class1">
  <p>...</p>
  <p>...</p>
</div>
<a id="test">Test</a>

​</p> 

.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');
    });
});​

类下面的所有内容都将更改为新样式:)

小提琴

于 2012-06-26T09:19:16.023 回答