jQuery .css（）不起作用 [英] jQuery .css() doesn't work
问题描述
我试图在我的网站上使用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缓存和禁用缩小/火箭加载器后）。
欣赏所有帮助！编辑：这段代码的全部内容是替换！重要的内联CSS，并将背景更改为完全透明，即零不透明度。所以rgba（0,0,0,0）是正确的并且是有意的。
代码的目的是去除！重要的'背景'内联样式，参见：
< div class =shareaholic-share-button-containerng-click =sb.click（）style = color：＃000000！important;
background：#fafafa！important; //目的是删除这行
opacity：1.00！important;>
background：#fafafa！important; // and this line
opacity ：1.00！important;> 0< / span>
< div class =share-button-sizingng-style =config.customColorsEnabled& amp; amp; amp; amp; amp.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-facebookng-style =config.customColorsEnabled？config.customColors：{}style =color：rgb（0，0，0）; opacity ：1; background：rgb（250,250,250）;>< / i>
< b class =ng-binding>分享< / b>
< / span>
< / div>
< / div>
在DOM完全加载之前，您正在调用该函数。
所以 jQuery（。shareaholic-share-button-container）返回空数组。 （因为这个元素甚至在你调用这个代码的时候并没有做出）
-
如果
.shareaholic-share -button-container是直接从HTML文件创建的，然后将JavaScript放在页面底部。 c $ c> .shareaholic-share-button-container 是动态创建的，完全呈现后调用javascript。
例如你的情况，你可以使用窗口准备事件回调。
$ b
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））;
}
}）;
小心此解决方案无法保证在跨浏览器环境下工作。并可能导致性能问题
I'm trying to change inline CSS using jQuery on my website. So far I have tried the following code:
<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>
I have also tried:
<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>
And
<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>
However, nothing is working. Interestingly the code works when Cloudflare's development mode is turned on, but when it is turned off the code doesn't work (even after purging the Cloudflare cache and disabling minification / rocket loader).
Appreciate all help!
Edit: the whole point of this code is to replace the !important inline CSS and change the background to be completely transparent, i.e. zero opacity. So rgba(0,0,0,0) is correct and intended.
The purpose of the code is to remove !important 'background' inline style, see:
<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>
You are calling that function before DOM is fully loaded.
So jQuery(".shareaholic-share-button-container") returns empty array. (because that element is not even made when you call this code)
If
.shareaholic-share-button-containeris created from html file directly, then place your javascript at the bottom of the page.If
.shareaholic-share-button-containeris created dynamically, call javascript after fully rendered.
For example in your case, you can use window ready event callback.jQuery(window).ready(function(){ jQuery(".shareaholic-share-button-container").css("background-color", "red");});
Edit: Ok, your problem is 2, but it is created asynchronously, so you don't know exact time when it created and even you cannot inject source code right after that.
One solution is observing every DOM element creation event.
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)");
}
});
CAUTION This solution does not guarantee of working on cross browser environment. and may cause performance issue
这篇关于jQuery .css（）不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
