jQuery .css() не работает

Question

Я пытаюсь изменить встроенный CSS с помощью jQuery на своем веб-сайте. До сих пор я попытался следующий код:

<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 и отключения мини-экскаватора/ракеты-загрузчика).

Цените всю помощь!

Редактировать: вся суть этого кода заключается в замене важного встроенного CSS и изменения фона, чтобы он был полностью прозрачным, т. Е. Непрозрачность нуля. Поэтому rgba (0,0,0,0) является правильным и предназначенным. !

Целью кода является удаление важных «фон» встроенный стиль, см:

<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 полностью загружен.

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

Edit: Хорошо, ваша проблема 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'); 

Для переопределения важной проверки CSS по этой ссылке: How to override css containing '!important' using jquery?

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>