CODEWITHSUNDEEP
javascriptjqueryhtmlcssdom
David Z
David Z

Reputation: 93

jQuery to modify inline CSS of element inside DOM

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

enter image description here

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 :)

Upvotes: 0

Views: 378

Answers (3)

Pankaj Dubey
Pankaj Dubey

Reputation: 824

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>");
});

Upvotes: 0

Rajan Goswami
Rajan Goswami

Reputation: 769

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");
});

Upvotes: 1

brk
brk

Reputation: 50291

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

Upvotes: 2

Related Questions