How to get the css of a javascript container and all objects within it in javascript or jquery

Question

Some elements in my page are rendered through php code. Sometimes, on link clicks that redirect to a page in the same site, I want to insert html elements like div, span etc through javascript in their respective places. My main question is: how do I insert the elements in the appropriate place, and apply the same css styles to them as they would have if they had been inserted through normal flow like php or html code.

For example, suppose I need to insert a div element, which has a span element and an image element inside it, inside a container that has the other elements with the same structure:

<div class="container"><div><span></span><img /></div>...<div><span></span><img /></div> </div>  .

I want to apply same style rules to my inserted elements as there are for other elements. That is, the inserted

<div><span></span><img /></div>

should have the same styles applied as

<style>

.container div {...} .container div span {...} .container div img{...}

But I dont want to manually compute the styles and then add those styles in jquery. How do I do this. The second part of this question is: suppose there are conditional styles applied depending on the browser. Now, how do I apply the conditional styles depending on the browser, without trying to do it manually?

can u explain this "Sometimes, on link clicks that redirect to a page in the same site" — Shiva Srikanth Thummidi
– Shiva Srikanth Thummidi, Commented Aug 7, 2009 at 5:01
I think what is important here is that I am in a situtation where I think it is impossible or very hard to write the code in php, so I need to add elements to the html using jquery. The "link clicks" stuff is there just to point out that I am in a 'situation'. But more specifically, I am using drupal CMS, and if I had a button and a button handler, I could do: drupal_set_message("You eat ice cream.") But as it is a link click and a link made by drupal core, my only option is to add javascript to achieve the effect. I wnat to insert a message in messages container with appropriate css. — umar
– umar, Commented Aug 7, 2009 at 5:07
Basically, the main flow is that when a user requests an action like Add a Forum Topic, Or Create a page, he is redirected to user login page. I need to add a message that "Please log in first to complete your requested task." I need javascipt as I think it is possible to do it on button click if i get button handler, but cannot seem to get handler for a link. — umar
– umar, Commented Aug 7, 2009 at 5:09

Andrew Moore · Accepted Answer · 2009-08-07 15:44:26Z

1

If you create your element using jQuery, simply use addClass() to add the container class to the parent <div> as such:

var new_div = $('<div/>').addClass('container');
// or (whatever floats your boat)
var new_div = $(document.createElement('div')).addClass('container');

It will then be styled as any other div.container on your page.

If you are getting your elements via AJAX, make sure that the HTML you are sending already have the class applied.

If you are simply adding elements inside your <div class="container"> via jQuery, they automatically follow the same style as the rest of the elements based on the markup you posted without any added code.

// The inserted elements automatically follows the rules
// in the internal and external stylesheet.
var container = $('div.container:first').append('<div><span></span><img /></div>');

It does not however automatically copy inline styles. Those should be moved to either an internal or external style-sheet.

Personally, I find that inline styles are usually code-smells unless used for last-minute width and height purposes in variable-size boxes situations.

edited Aug 7, 2009 at 15:44

answered Aug 7, 2009 at 5:07

Andrew Moore

95.8k30 gold badges167 silver badges175 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

s4y Over a year ago

$(document.createElement('div')) is a little bit faster because jQuery doesn't have do any parsing.

Collectives™ on Stack Overflow

How to get the css of a javascript container and all objects within it in javascript or jquery

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related