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, Sep 27 '16 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, Sep 27 '16 at 14:11

Johannes · Accepted Answer · 2016-09-27T14:18:56.697

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 '16 at 14:18

answered Sep 27 '16 at 14:02

Johannes

64,305
18
73
130

when I remove $ I get error, Uncaught TypeError: $ is not a function – Sanjeev Kumar Sep 27 '16 at 14:10

Ted · Answer 2 · 2016-09-27T14:10:06.017

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 '16 at 14:10

answered Sep 27 '16 at 13:52

Ted

3,985
1
20
33

I wish I could, but that has already a css defined with important which is not editable :( – Sanjeev Kumar Sep 27 '16 at 13:54
just add `!important` again, and make sure that it follows the `css` file that has the `!important` styles in it – Ted Sep 27 '16 at 13:58
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? – Ted Sep 27 '16 at 14:04
that has margin-left and right with important as well, I think its not covered in snapshot – Sanjeev Kumar Sep 27 '16 at 14:07
'!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; }) – muka.gergely Sep 27 '16 at 14:07
You shouldn't use `!important` if you don't need to. See here http://stackoverflow.com/questions/3706819/what-are-the-implications-of-using-important-in-css – BadHorsie Sep 27 '16 at 16:05

score 0 · Answer 3 · answered Sep 27 '16 at 14:11

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>

add inline style to dynamically generated div using jquery

3 Answers3