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

You cannot do it in AngularJS directly? Why you want to use jQuery?? If you don't have access to the DOM, you should try `document.querySelector().style = '';` — Hitmands, Dec 24 '15 at 07:43
Because I am unable to modify the inline CSS inserted by a plugin. Could you elaborate on that code solution? Not sure how to implement that — David Z, Dec 24 '15 at 07:47

score 2 · Answer 1 · edited Dec 24 '15 at 07:54

2

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

edited Dec 24 '15 at 07:54

Sean Francis N. Ballais

2,338
2
24
42

answered Dec 24 '15 at 07:50

brk

48,835
10
56
78

Does not work for me. As stated in the question, element is within DOM only so the usual jQuery scripts to modify it do not work. I have already previously tried all your other suggestions. Your current suggestion is live on the site. – David Z Dec 24 '15 at 07:55
I just checked the DOM , there is a css property of 6px. So if u check the inner div is completly outside its parent div,Otherwise there is no point that it wont work – brk Dec 24 '15 at 08:11
I'm sorry I don't understand you about the inner div and parent div? The CSS property of 6px was added by the plugin, and can be modified at the backend directly. – David Z Dec 24 '15 at 08:14
Can we access by id instead of class name? – Panadol Chong Aug 18 '21 at 11:12

score 1 · Answer 2 · answered Dec 24 '15 at 07:59

1

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

answered Dec 24 '15 at 07:59

Rajan Goswami

769
1
5
17

Unfortunately the usual jQuery modifications do not work as the element is in the DOM only. – David Z Dec 24 '15 at 08:01

score 0 · Answer 3 · answered Dec 24 '15 at 10:21

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

jQuery to modify inline CSS of element inside DOM

3 Answers3