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缓存并禁用缩小/火箭加载器之后）。

感谢所有帮助！

编辑：此代码的重点是替换！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完全加载之前，您正在调用该函数。

所以self.window.backgroundColor = [UIColor <yourColor>]; [[UIApplication sharedApplication] setStatusBarStyle:UIStatusBarStyleBlackTranslucent];返回空数组。（因为在调用此代码时甚至不会生成该元素）

如果直接从html文件创建jQuery(".shareaholic-share-button-container")，请将您的javascript放在页面底部。
如果动态创建.shareaholic-share-button-container，请在完全呈现后调用javascript。
例如，您可以使用窗口就绪事件回调。
```
.shareaholic-share-button-container
```

编辑：好的，您的问题是2，但它是异步创建的，所以您不知道创建的确切时间，甚至您不能在此之后注入源代码。<登记/> 一种解决方案是观察每个DOM元素创建事件。

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

注意此解决方案无法保证在跨浏览器环境中工作。并可能导致性能问题

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检查此链接： 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>

jQuery .css（）不起作用

3 个答案: