Jquery - 将 css 样式应用于指定 div 中的所有元素？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6536797/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Jquery - apply css style to all elements within specifed div?
提问by levi
I have a situation where I am setting up a mobile theme for a wordpress website. Now what I would like to do is, grab any elements (p, divs, etcc) within the "#content" div, and apply css "width: 100%" to each of those child elements.
我有一种情况，我正在为 wordpress 网站设置移动主题。现在我想要做的是，在“#content”div 中抓取任何元素（p、divs 等），并将 css“width: 100%”应用于每个子元素。
The reason I want to this is, in event somebody sets a fixed width for a div, I need it to overwrite that and revert it to 100% so it does not get cutoff when viewing on a mobile device with a smaller screen.
我想要这样做的原因是，如果有人为 div 设置了固定宽度，我需要它覆盖它并将其恢复为 100%，以便在具有较小屏幕的移动设备上查看时不会被截断。
I would like to know how this can be achieved using Jquery.
我想知道如何使用 Jquery 实现这一点。
I appreciate any help with this. Thanks
我很感激这方面的任何帮助。谢谢
回答by Sampson
Sometimes, jQuery is the wrong way...
有时，jQuery 是错误的方式......
You shouldn't use jQuery unless it's offers a legitimate advantage. Often times using standard JavaScript will give you enormous performance advantages. With your situation, you could do something like the following:
你不应该使用 jQuery，除非它提供了合法的优势。很多时候使用标准的 JavaScript 会给你带来巨大的性能优势。根据您的情况，您可以执行以下操作：
var i,
tags = document.getElementById("content").getElementsByTagName("*"),
total = tags.length;
for ( i = 0; i < total; i++ ) {
tags[i].style.width = '100%';
}
Online Demo: http://jsbin.com/otunam/3/edit
在线演示：http: //jsbin.com/otunam/3/edit
That being said, the jQuery method is pretty simple as well.
话虽如此，jQuery 方法也非常简单。
$('#content').find('*').width('100%');
This will run down into each level of #content, affecting all elements.
这将运行到 的每个级别#content，影响所有元素。
Online Demo: http://jsbin.com/otunam/edit
在线演示：http: //jsbin.com/otunam/edit
Performance Differences
性能差异
Using http://jsperf.comto compare the peformance difference here we can see the magnitude of speed raw JavaScript has over the jQuery alternative. In one test JavaScript was able to complete 300k operations in the time it took jQuery to complete 20k.
使用http://jsperf.com比较这里的性能差异，我们可以看到原始 JavaScript 与 jQuery 替代品相比的速度大小。在一项测试中，JavaScript 能够在 jQuery 完成 20k 次操作的时间内完成 300k 次操作。
Test Now: http://jsperf.com/resizing-children
立即测试：http: //jsperf.com/resizing-children
But, Why JavaScript?
但是，为什么是 JavaScript？
Ultimately the question of whether jQuery or Raw JavaScript is better is a red-herring, distracting from the real question - why use scripting at all? If you detect a mobile browser, load a new stylesheet containing mobile rules:
最终，jQuery 还是 Raw JavaScript 更好的问题是一个红鲱鱼，分散了真正的问题——为什么要使用脚本？如果您检测到移动浏览器，请加载包含移动规则的新样式表：
#content * { width:100% }
回答by DanielB
Here you go:
干得好：
$('#content > *').css('width', '100%');
You could override it in CSS too:
你也可以在 CSS 中覆盖它：
#content > * {
width: 100% !important
}
!importantwill assure that it overrides all (including inline style) definitions.
!important将确保它覆盖所有（包括内联样式）定义。
回答by kei
$("#content *").css("width","100%");//everything inside #content
$("#content *").css("width","100%");//#content里面的所有内容
or
或者
$("#content > *").css("width","100%");//just the direct children of #content
$("#content > *").css("width","100%");//只是#content的直接孩子
回答by mr_eclair
<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>
回答by RoToRa
CSS:
CSS：
#content > * { /* applies to all direct children of #content */
width: 100%;
}
Of if you have to use JavaScript/jQuery:
如果你必须使用 JavaScript/jQuery：
jQuery("#content > *").css("width", "100%");
回答by phihag
In general, fixing style sheets with JavaScript is a bad idea. You'll end up with a mess of automatically changed styles.
通常，使用 JavaScript 修复样式表是一个坏主意。您最终会得到一堆自动更改的样式。
Luckily, you can solve your problem in CSS:
幸运的是，您可以在 CSS 中解决您的问题：
#content div,#content p,#content etcc {width: 100%;}
You can match all direct children by replacing the spaces with >(for example, #content>div).
您可以通过将空格替换为>（例如，#content>div）来匹配所有直接子级。
If you don't want to enumerate all element names in #content, just use #content *(or #content>*for all direct children).
如果您不想枚举 中的所有元素名称#content，只需使用#content *（或#content>*用于所有直接子元素）。
