Jquery - apply css style to all elements within sp

2020-03-01 05:15发布

站内问答 / jQuery
1977 6 4

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.

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.

I would like to know how this can be achieved using Jquery.

I appreciate any help with this. Thanks

6条回答
叛逆
2楼-- · 2020-03-01 05:54

$("#content *").css("width","100%"); //everything inside #content

or

$("#content > *").css("width","100%"); //just the direct children of #content

查看更多
0人赞 添加讨论(0) 举报
ら.Afraid
3楼-- · 2020-03-01 05:56

In general, fixing style sheets with JavaScript is a bad idea. You'll end up with a mess of automatically changed styles.

Luckily, you can solve your problem in CSS:

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

You can match all direct children by replacing the spaces with > (for example, #content>div).

If you don't want to enumerate all element names in #content, just use #content * (or #content>* for all direct children).

查看更多
0人赞 添加讨论(0) 举报
我命由我不由天
4楼-- · 2020-03-01 05:57

Sometimes, jQuery is the wrong way...

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:

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

That being said, the jQuery method is pretty simple as well.

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

This will run down into each level of #content, affecting all elements.

Online Demo: http://jsbin.com/otunam/edit

Performance Differences

Using http://jsperf.com to 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.

Test Now: http://jsperf.com/resizing-children

But, Why 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:

#content * { width:100% }
查看更多
0人赞 添加讨论(0) 举报
你好瞎i
5楼-- · 2020-03-01 05:59 
<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>
查看更多
0人赞 添加讨论(0) 举报
Luminary・发光体
6楼-- · 2020-03-01 06:04

CSS:

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

Of if you have to use JavaScript/jQuery:

jQuery("#content > *").css("width", "100%");
查看更多
0人赞 添加讨论(0) 举报
来，给爷笑一个
7楼-- · 2020-03-01 06:10

Here you go:

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

You could override it in CSS too:

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

!important will assure that it overrides all (including inline style) definitions.

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)