jQuery - 如何将 CSS 样式应用于指定 div 中的所有元素？

Question

jQuery - 如何将 CSS 样式应用于指定 div 中的所有元素？

jquerycssjquery-selectors

25

我有一个情况，正在为WordPress网站设置移动主题。现在我想要做的是，获取“＃content” div中的任何元素（p、div等），并将CSS“width：100％”应用于每个子元素。

我之所以想这样做，是因为如果有人为div设置了固定宽度，我需要覆盖它并将其恢复为100％，以便在小屏幕的移动设备上查看时不会被截断。

我想知道如何使用jQuery实现此目标。

非常感谢您的帮助。谢谢

- levi

2

如果您正在设置“移动主题”，那么肯定有一个“移动样式表”吧？请使用CSS进行更改，而不是JavaScript。 - thirtydot

6个回答

10

这里是你需要的：

$('#content > *').css('width', '100%');

你也可以在CSS中覆盖它:

#content > * {
    width: 100% !important
}

!important会确保它覆盖所有定义，包括内联样式。

- DanielB

4

$("#content *").css("width","100%"); //选择#content内的所有元素

或者

$("#content > *").css("width","100%"); //仅选择#content的直接子元素

- kei

2

CSS:

#content > * { /* applies to all direct children of #content */
  width: 100%;
}

如果必须使用JavaScript/jQuery：

jQuery("#content > *").css("width", "100%");

- RoToRa

2

<html>
<head>
<title>Document</title>
<script type="text/javascript" src="jquery-1.3.2.js"></script>

<script type="text/javascript">
$("document").ready(function(){
$("#container > *").css("color","red");
});
</script>

<style type="text/css">
.a { color: Navy; }
.b { color: Maroon; }

</style>
</head>
<body>

    <ul id="list1">
        <li ><a href="some.pdf">PDF</a></li>
        <li ><a href="some.pdf">d</a></li>
        <li ><a href="some.pdf">d</a></li>
        <li ><a href="some.pdf">d</a></li>
        <li ><a href="some.pdf">d</a></li>
    </ul>
<div id="container">    
<p>This is paragraph 1</p>
<p>This is paragraph 2</p>
<p>This is paragraph 3</p>
<p>This is paragraph 4</p>
</div>
</body>
</html>

- Vishwanath Dalvi

1

通常情况下，使用JavaScript修复样式表是一个不好的主意。你最终会得到一堆自动更改的样式混乱。

幸运的是，你可以在CSS中解决你的问题：

#content div,#content p,#content etcc {width: 100%;}

您可以通过将空格替换为>来匹配所有直接子元素（例如，#content>div）。

如果您不想在#content中枚举所有元素名称，只需使用#content *（或#content>*表示所有直接子元素）。

- phihag

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Sampson · Accepted Answer

有时候，jQuery不是正确的方式...

除非jQuery提供了明显的优势，否则就不应该使用它。通常情况下，使用标准JavaScript会给您带来巨大的性能优势。对于您的情况，您可以尝试像下面这样做：

var i,
    tags = document.getElementById("content").getElementsByTagName("*"),
    total = tags.length;
for ( i = 0; i < total; i++ ) {
  tags[i].style.width = '100%';
}

在线演示：http://jsbin.com/otunam/3/edit

话虽如此，jQuery 方法也非常简单。

$('#content').find('*').width('100%');

这将向每个级别的 #content 运行，影响所有元素。

在线演示：http://jsbin.com/otunam/edit

性能差异

使用 http://jsperf.com 来比较性能差异，我们可以看到原生JavaScript相比jQuery有多快。在一个测试中，JavaScript 可以完成 30 万次操作，而 jQuery 需要完成 2 万次操作才能达到同样的时间。

立即测试：http://jsperf.com/resizing-children

但是，为什么选择 JavaScript？

归根结底，jQuery和原生JavaScript哪一个更好的问题是一个误导人的问题，分散了注意力，真正需要关注的问题是 - 为什么要使用脚本？如果检测到移动浏览器，请加载包含移动规则的新样式表：

#content * { width:100% }