jQuery .css（）不起作用

Question

我正在嘗試在我的網站上使用jQuery更改內聯CSS。 到目前為止，我已經嘗試了以下代碼：

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

我也嘗試過：

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

和

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

但是，沒有任何效果。 有趣的是，當打開Cloudflare的開發模式時，代碼可以工作，但是當關閉Cloudflare的開發模式時，代碼不起作用（即使清除了Cloudflare緩存並禁用了縮小/火箭加載程序）。

感謝所有幫助！

編輯：此代碼的全部重點是替換！important內聯CSS並將背景更改為完全透明，即不透明度為零。 因此rgba（0,0,0,0）是正確的和預期的。

該代碼的目的是刪除！important'background'內聯樣式，請參見：

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

Answer 1

您正在DOM完全加載之前調用該函數。

因此jQuery(".shareaholic-share-button-container")返回空數組。 （因為調用此代碼時甚至沒有創建該元素）

1. 如果.shareaholic-share-button-container是直接從html文件創建的，則將您的javascript放在頁面底部。

2. 如果.shareaholic-share-button-container是動態創建的，請在完全渲染后調用javascript。
   例如，您可以使用窗口就緒事件回調。
   

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

編輯：好的，您的問題是2，但是它是異步創建的，因此您不知道創建它的確切時間，甚至之后也無法注入源代碼。
一種解決方案是觀察每個DOM元素創建事件。

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

注意此解決方案不能保證可以在跨瀏覽器環境中工作。 並可能導致性能問題

Answer 2

您設置了背景色，但背景色不存在，因為您將不透明度設置為0（零）。 嘗試例如50％的不透明度

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

然后自定義您的不透明度 0是零不透明度。 透明度是> 0和<100的值。 選擇透明度的值。

如果您的需求是100％透明，jQuery會提供

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

要覆蓋！important CSS，請檢查以下鏈接： 如何使用jquery覆蓋包含'！important'的CSS？

Answer 3

嘗試以下操作：如果rgba在jQuery中不起作用，則可以通過以兩種不同方式編寫代碼來提供background-color屬性和opacity 。 此外， !important在jQuery中不起作用，僅在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>