我正在尝试在我的网站上使用 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 && 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 完全加载之前调用该函数。
因此 jQuery(".shareaholic-share-button-container")
返回空数组。 (因为当你调用这段代码时甚至没有创建那个元素)
如果
.shareaholic-share-button-container
是直接从 html 文件创建的,则将您的 javascript 放在页面底部。如果
.shareaholic-share-button-container
是动态创建的,则在完全渲染后调用 javascript。
例如,在您的情况下,您可以使用窗口就绪事件回调。jQuery(window).ready(function(){ jQuery(".shareaholic-share-button-container").css("background-color", "red");});
编辑: 好的,你的问题是 2,但它是异步创建的,所以你不知道它创建的确切时间,甚至你不能在之后立即注入(inject)源代码。
一种解决方案是观察每个 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)");
}
});
注意 此解决方案不保证在跨浏览器环境下工作。并可能导致性能问题
关于javascript - jQuery .css() 不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34448038/