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 &gt; *").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)的元素呢?

如何使用jquery移除CSS样式

如何将样式应用于页面 iframe 内的 div? [复制]

如何使用 JQuery 将 css 属性应用于子元素

jquery怎么获取下一个具有指定样式(class)的元素呢?