jQuery .css() doesn't work

问题:

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

回答1:

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

回答2:

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?

回答3:

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>