javascript - jQuery 修改 DOM 内元素的内联 CSS

Question

编辑:我已经尝试过 removeAttr、addClass、removeClass、更改不透明度...基本上，更改内联 CSS 的常用 jQuery 脚本在这里不起作用!

网站位于 http://thehungrygeek.com

不幸的是，背景由位于 DOM 内的 !important 内联 CSS 元素设置。

内联CSS元素代码如下:

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

此代码无法通过“查看源代码”看到，但如果您按照上图检查共享按钮，就会看到它。该元素位于 DOM 内部。

该元素可能是由 HTML 代码中的这一行调用的:

<script type='text/javascript' src='//dsms0mj1bbhn4.cloudfront.net/assets/pub/shareaholic.js' data-shr-siteid='82ff342d6c171e823bc5c49c19bf1b59' data-cfasync='false' async='async'>
</script>

有没有办法使用 jQuery 来更改 DOM 中元素的内联 CSS？

到目前为止，通常的 jQuery .css() 不起作用，我试过了:

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

我也尝试过 removeAttr、addClass、removeClass、改变不透明度...

还有许多其他类似的常用代码迭代。我也尝试了在 How to override css containing '!important' using jquery? 找到的建议

基本上，通常用于更改内联 CSS 的 jQuery 脚本在这里不起作用!

问题似乎是使用 jQuery 来定位 DOM 中的元素。有办法做到这一点吗？

提前致谢:)

Answer 1

由于您使用的是 jQuery，因此您可以先使用 removeAttr() 方法移除样式属性，然后再应用 CSS。

jQuery(window).ready(function() {
    jQuery(".shareaholic-share-button-container,.share-button-counter").removeAttr('style').css("background", "green");
});

WORKING DEMO

这只是一个演示，您可以根据需要进行更改。也更喜欢使用 addClass 和 removeClass