Jquery - 将css样式应用于指定div中的所有元素?
Posted
技术标签:
【中文标题】Jquery - 将css样式应用于指定div中的所有元素?【英文标题】:Jquery - apply css style to all elements within specifed div? 【发布时间】:2011-09-26 01:54:33 【问题描述】:我有一种情况,我正在为 wordpress 网站设置移动主题。 现在我想做的是,抓取“#content” div 中的任何元素(p、divs 等),并将 css“width: 100%”应用于每个子元素。
我想要这样做的原因是,如果有人为 div 设置了固定宽度,我需要它覆盖它并将其恢复为 100%,这样在屏幕较小的移动设备上查看时它不会被截断.
我想知道如何使用 Jquery 来实现。
感谢您对此提供的任何帮助。 谢谢
【问题讨论】:
如果您要设置“移动主题”,您肯定有“移动样式表”吗?使用 CSS 进行更改,而不是 javascript.. 【参考方案1】:CSS:
#content > * /* applies to all direct children of #content */
width: 100%;
如果你必须使用 JavaScript/jQuery:
jQuery("#content > *").css("width", "100%");
【讨论】:
【参考方案2】:一般来说,使用 JavaScript 修复样式表是个坏主意。你最终会得到一堆自动更改的样式。
幸运的是,您可以在 CSS 中解决您的问题:
#content div,#content p,#content etcc width: 100%;
您可以通过将空格替换为>
(例如#content>div
)来匹配所有直接子级。
如果您不想枚举#content
中的所有元素名称,只需使用#content *
(或#content>*
用于所有直接子级)。
【讨论】:
【参考方案3】:给你:
$('#content > *').css('width', '100%');
你也可以在 CSS 中覆盖它:
#content > *
width: 100% !important
!important
将确保它覆盖所有(包括内联样式)定义。
【讨论】:
【参考方案4】:有时候,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 能够在 jQuery 完成 20k 的时间内完成 300k 操作。
立即测试:http://jsperf.com/resizing-children
但是,为什么是 JavaScript?
最终,jQuery 还是 Raw JavaScript 哪个更好的问题是一个红鲱鱼,分散了真正问题的注意力——为什么要使用脚本?如果您检测到移动浏览器,请加载包含移动规则的新样式表:
#content * width:100%
【讨论】:
假设我已经为其他目的加载 jquery,使用标准 js 是否仍会获得性能优势? @levi 您可以在此处查看性能比较:jsperf.com/resizing-children - 在此处使用原始 JavaScript 要快得多。 感谢您的精彩回答! 这样详细的答案至少应该有一个+1。完成。 很高兴知道 javascript 中没有提供函数来管理继承样式。所以我不会用谷歌搜索它。而且我总是使用 Javascript,不像这里的大多数画家。【参考方案5】:$("#content *").css("width","100%");
//#content 里面的一切
或
$("#content > *").css("width","100%");
//只是#content的直接子代
【讨论】:
【参考方案6】:<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>
【讨论】:
以上是关于Jquery - 将css样式应用于指定div中的所有元素?的主要内容,如果未能解决你的问题,请参考以下文章
如何使用 $(element).css(styles) 将多个样式应用于 div? [复制]
jquery怎么获取下一个具有指定样式(class)的元素呢?