jQuery to modify inline CSS of element inside DOM

Question

EDIT: I have already tried removeAttr, addClass, removeClass, changing the opacity... Basically the usual jQuery scripts to change inline CSS DO NOT WORK here!

Website is at http://thehungrygeek.com

Unfortunately the background there is set by an !important inline CSS element that is located inside the DOM.

Inline CSS element code is as follows:

<div class="shareaholic-share-button-container" ng-click="sb.click()" style="color:#000000 !important;
           background:#fafafa !important; // the purpose is to remove this line
           opacity: 1.00 !important;">
           <span class="share-button-counter ng-binding" style="color:#000000 !important;
                 background:#fafafa !important; // and this line
                 opacity: 1.00 !important;">0</span>
            <div class="share-button-sizing" ng-style="config.customColorsEnabled &amp;&amp; config.appName === 'floated_share_buttons' ? config.customColors : {}" style="color: rgb(0, 0, 0); opacity: 1; background: rgb(250, 250, 250);">
              <i class="shareaholic-service-icon service-facebook" ng-style="config.customColorsEnabled ? config.customColors : {}" style="color: rgb(0, 0, 0); opacity: 1; background: rgb(250, 250, 250);"></i>
              <span class="share-button-verb ng-binding" style="color:#000000 !important">
                <b class="ng-binding">Share</b>

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

This code can't be seen with 'view source', but you will see it if you inspect the share buttons as per the image above. The element is inside the DOM.

The element is probably called by this line in the HTML code:

<script type='text/javascript' src='//dsms0mj1bbhn4.cloudfront.net/assets/pub/shareaholic.js' data-shr-siteid='82ff342d6c171e823bc5c49c19bf1b59' data-cfasync='false' async='async'>
</script>

Is there a way to use jQuery to change the inline CSS of an element within the DOM?

So far the usual jQuery .css() do not work, I have tried:

<script type="text/javascript">
     jQuery(window).ready(function(){
     jQuery(".shareaholic-share-button-container").css("background", "rgba(0,0,0,0)");
     jQuery(".share-button-counter").css("background", "rgba(0,0,0,0)");
});
</script>

I have also tried removeAttr, addClass, removeClass, changing the opacity...

And a lot of other similar iterations of the usual code. I have also tried the suggestions found at How to override css containing '!important' using jquery?

Basically the usual jQuery scripts to change inline CSS DO NOT WORK here!

The problem seems to be using jQuery to target an element inside the DOM. Is there a way to do this?

Thanks in advance :)

Answer 1

Since you are using jQuery, you can first use the removeAttr() method to remove the style attribute then apply the CSS.

jQuery(window).ready(function() {
    jQuery(".shareaholic-share-button-container,.share-button-counter").removeAttr('style').css("background", "green");
});

WORKING DEMO

This is just a demo , you can make changes as required. Also prefer to use addClass & removeClass

Answer 2

You can just set the opacity to 0 for the background to be transparent.

jQuery(window).ready(function() {
    jQuery(".shareaholic-share-button-container,.share-button-counter").css("opacity", "0");
});

Answer 3

If css classes are not playing with padding and margin then you can try this tick-

jQuery(window).ready(function() {
    jQuery(".shareaholic-share-button-container").html("<div style='background: black'>"+ jQuery(".shareaholic-share-button-container").html() +"</div>");
    jQuery(".share-button-counter").html("<div style='background: black'>"+ jQuery(".share-button-counter").html() +"</div>");
});