I'm trying to change inline CSS using jQuery on my website. So far I have tried the following code:

<script type="text/javascript">
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:

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

And

<script type="text/javascript">
jQuery(document).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>

However, nothing is working. Interestingly the code works when Cloudflare's development mode is turned on, but when it is turned off the code doesn't work (even after purging the Cloudflare cache and disabling minification / rocket loader).

Appreciate all help!

Edit: the whole point of this code is to replace the !important inline CSS and change the background to be pletely transparent, i.e. zero opacity. So rgba(0,0,0,0) is correct and intended.

The purpose of the code is to remove !important 'background' inline style, see:

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

I'm trying to change inline CSS using jQuery on my website. So far I have tried the following code:

<script type="text/javascript">
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:

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

And

<script type="text/javascript">
jQuery(document).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>

However, nothing is working. Interestingly the code works when Cloudflare's development mode is turned on, but when it is turned off the code doesn't work (even after purging the Cloudflare cache and disabling minification / rocket loader).

Appreciate all help!

Edit: the whole point of this code is to replace the !important inline CSS and change the background to be pletely transparent, i.e. zero opacity. So rgba(0,0,0,0) is correct and intended.

The purpose of the code is to remove !important 'background' inline style, see:

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

• javascript
• jquery
• html
• css
• cloudflare

• I think its working in your site currently, try to change color code and try again. – Harsh Sanghani Commented Dec 24, 2015 at 6:04
• because it add inline css for that class in your site. – Harsh Sanghani Commented Dec 24, 2015 at 6:04
• try with background-color instead of background – Yogesh Sharma Commented Dec 24, 2015 at 6:06
• This is not working because initially your elements are not visible but elements exists in DOM and this will not affect anything as you are expecting. I have just copy-paste and run your code in console when elements are visible and it working. – Jitendra Khatri Commented Dec 24, 2015 at 6:09
• @JitendraKhatri is there a way for me to change the inline CSS elements thats inside DOM then? – David Z Commented Dec 24, 2015 at 6:11

3 Answers 3

You are calling that function before DOM is fully loaded.

So jQuery(".shareaholic-share-button-container") returns empty array. (because that element is not even made when you call this code)

1. If .shareaholic-share-button-container is created from html file directly, then place your javascript at the bottom of the page.

2. If .shareaholic-share-button-container is created dynamically, call javascript after fully rendered.
   For example in your case, you can use window ready event callback.
   

   jQuery(window).ready(function(){
      jQuery(".shareaholic-share-button-container").css("background-color", "red");});
   

Edit: Ok, your problem is 2, but it is created asynchronously, so you don't know exact time when it created and even you cannot inject source code right after that.
One solution is observing every DOM element creation event.

jQuery('body').bind("DOMSubtreeModified", function(e) {
    var $tmp = jQuery(e.target).find(".shareaholic-share-button-container");
    if($tmp.length){
        $tmp.css("background-color", "rgba(0,0,0,0)");
    }
});

CAUTION This solution does not guarantee of working on cross browser environment. and may cause performance issue

you set a background color but it is absent, because you set opacity 0 (zero). Try e.g. 50% opacity

jQuery(".shareaholic-share-button-container").css("background", "rgba(0,0,0,50)"); // 50% opacity

and then customize your opacity. 0 is zero opacity. Transparency is a value >0 and <100. Choose the value of your transparency.

if your need is 100% transparency, jquery provides

$(".shareaholic-share-button-container").css('background-color','transparent');

To override !important css check this link: How to override css containing '!important' using jquery?

Try this: If rgba not working in jQuery then background-color property and opacity can be given by writing the code in two different way. Also, !important does not work in jQuery, only use in css

<script type="text/javascript">
$(document).ready(function(){


$(".shareaholic-share-button-container").css("background-color", "#000");
$(".shareaholic-share-button-container").css("opacity", "0.5");

});
</script>