CODEWITHSUNDEEP
javascriptjqueryhtmlcssdynamic
PeterInvincible
PeterInvincible

Reputation: 2310

Style a dynamically created div element

I would like to apply a css style to a element after it's created. The element is created by a plugin, so I can't access the event in which it is created.

This element has the .appointments-address-field class. I have tried to add a simple style:

.appointments-address-field {
    background: #fff;
}

... with no success. Then I tried to attach a delegated load event in jQuery:

$(document).on('load', '.appointments-address-field'), function() {
    $('.appointments-address-field').css('background', '#fff');
});

... with no success either.

How can I apply a style to that element?

Edit: Sorry, I misspelled my jQuery code. Many of you have suggested to use .css instead of .style, but I did use that.

Upvotes: 1

Views: 1000

Answers (4)

Abhishek Kasera
Abhishek Kasera

Reputation: 240

Please use .css of jQuery

$(document).ready(function() {
   $('.appointments-address-field').css({'background':'#fff','border':"#000"});
});

after loading plugin, this line added in your code if u have ready event already included please below code only

$('.appointments-address-field').css({'background':'#fff','border':"#000"});

Upvotes: 1

iCollect.it Ltd
iCollect.it Ltd

Reputation: 93561

You were correct in the first place to use CSS and not code, but your css selector must be at least as specific as any existing background style applied to that element. I am of course assuming your styling is already included after the plugin's styling.

Use a tool like Chrome's F12 DOM inspector to view where the styling for an element is coming from and whether that is more specific.

e.g. it may need to be something like:

.some-parent-wrapper .some-appointment .some-group .appointments-address-field {
    background: #fff;
}

If you were able to provide a link to the actual site, it would be easy to suggest the correct selector.

Update:

Do not resort to the easy fallback of !important unless the current selector also uses it: http://james.padolsey.com/usability/dont-use-important/

Upvotes: 4

Alessandro Marchisio
Alessandro Marchisio

Reputation: 545

try

.appointments-address-field {
    background: #fff !important;
}

problems can be another style directive put different background

Upvotes: 0

T.J. Crowder
T.J. Crowder

Reputation: 1074218

Your first way should work, provided:

  1. You include it in a stylesheet after the stylesheet related to the plugin (if any).

  2. The plugin's stylesheet doesn't use !important; if it does, you can add that to your style.

  3. The plugin doesn't style the background of the element directly; if it does, you can use !important in your stylesheet to win.

  4. The plugin's rule isn't more specific than yours; if it is, make your rule more specific. In any modern browser, you can right-click the element, open the dev tools, and see the rules applied to it.

Fighting style wars with !important isn't ideal. If the plugin is making this difficult in that way, you may be better off finding out what event (if any) is fired when the plugin adds the element, and then running your

$('.appointments-address-field').css('background', '#fff');

...code in response to that. (load is not fired when elements are added to the DOM, which is why that didn't work.) Also note that the function is css, not style.

Upvotes: 3

Related Questions