add inline style to dynamically generated div using jquery

Question

I am trying to add inline style to a div using jquery, following is the div as I inspect in firebug (attached below)

I want to keep the existing CSS as well, I just have to add margin-left:0 and margin-right:0 to the existing class, following jquery I've tried but no luck:

jQuery(document).ready(function($){
   $(".testimonial_wrapper").css({'margin-left':'auto', 'margin-right':'auto'});    
});

What are the other way to achieve? (please note that I am editing wordpress site and the divs are generated from page builders plugin)

It's impossible to know where the problem is .... when are the divs generated ? — DaniP
– DaniP, Commented Sep 27, 2016 at 13:54
If you know the class that must be overridden you can do it with CSS. If the name is also dynamically generated (e.g. class-1 or class-32), then you have to see the dynamic generation process to override it with CSS. jQuery cannot overrule an '!important' CSS, as you cannot send '!important' as a parameter. You can only remove the class and put the one you want back in. (You should clone the class' CSS, change what you want under an other class name, and put it back in with your CSS class name.) — muka.gergely
– muka.gergely, Commented Sep 27, 2016 at 14:11

Johannes · Accepted Answer · 2016-09-27 14:18:56Z

1

I think you just have to erase the $ from function($) and change $to jQuery in the function itself:

jQuery(document).ready(function(){
   jQuery(".testimonial_wrapper").css({'margin-left':'auto', 'margin-right':'auto'});    
});

edited Sep 27, 2016 at 14:18

answered Sep 27, 2016 at 14:02

Johannes

67.9k22 gold badges84 silver badges139 bronze badges

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

1 Comment

Sanjeev Kumar Over a year ago

when I remove $ I get error, Uncaught TypeError: $ is not a function

Ted · Accepted Answer · 2016-09-27 14:10:06Z

0

perhaps you can add inline css:

<style type="text/css">
   div.testimonial_wrapper {
      padding-left : auto !important;
      padding-right: auto !important;
   }
</style>

the above will apply on new elements also but make sure it comes after the .css include

edited Sep 27, 2016 at 14:10

answered Sep 27, 2016 at 13:52

Ted

4,0671 gold badge23 silver badges35 bronze badges

6 Comments

Sanjeev Kumar Over a year ago

I wish I could, but that has already a css defined with important which is not editable :(

Ted Over a year ago

just add !important again, and make sure that it follows the css file that has the !important styles in it

Ted Over a year ago

of course it isn't. I just noticed the photo. you are trying to set the margin but in the picture it's the padding that's set to important. which one do you need then?

Sanjeev Kumar Over a year ago

that has margin-left and right with important as well, I think its not covered in snapshot

muka.gergely Over a year ago

'!important' after a CSS rule forces the rule to take effect - does not matter whether your CSS is before or after this rule. You can only override it with CSS if your rule is more specific (e.g. .xmplclass { something: xxx !important; } can only be overridden by something like div.xmplclass { something: yyy !important; })

|

Ganesh Putta · Accepted Answer · 2016-09-27 14:11:09Z

i have added my own styles and your required styles also, with out disturbing the line styles

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $("p").css("background-color", "yellow");
      $(".testimonial_wrapper").css({'margin-left':'auto', 'margin-right':'auto'});    
    });
});
</script>
</head>
<body>

<h2>This is a heading</h2>

<p class="testimonial_wrapper" style="background-color:#ff0000;border:1px solid #000;">This is a paragraph.</p>
<p class="testimonial_wrapper" style="background-color:#00ff00;border:1px solid #000;">This is a paragraph.</p>
<p class="testimonial_wrapper" style="background-color:#0000ff;border:1px solid #000;">This is a paragraph.</p>

<p>This is a paragraph.</p>

<button>Set background-color of p</button>

</body>
</html>

Collectives™ on Stack Overflow

add inline style to dynamically generated div using jquery

3 Answers 3

1 Comment

6 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related