我有一个应该有背景图像的元素,但是在我无法访问/修改的样式表中给出了以下样式:
#an-element li {
background: none !important;
}
是否可以使用jQuery撤消该样式？我试图background: inhert!important用两种方式添加jQuery:添加内联样式,并删除应用的样式.都没有工作.
这是一个说明问题的小提琴:http://jsfiddle.net/9bJzk/1/
更新:我有错误的小提琴链接,请再看一遍.
更新2:我无法编辑样式表.我现在更改了标题.我必须使用jQuery,因为我无法控制CSS文件的加载顺序,但可以运行jQuery onload.
更新3:我无法使用更精确的CSS选择器(如选择器)明确设置'kitten'图片(请参阅小提琴),就像#an-element .image-list li有人建议这些图像正在即时写出一样.jsFiddle只是一个例子.为了使它更清晰:可以background: none使用PURE jQuery撤消效果,而不是编辑任何样式表.谢谢你坚持这个!
Vir*_*721 20
div { background: none !important }
div { background: red; }
是透明的.
div { background: none !important }
div { background: red !important; }
是红色的.
一个!important可以覆盖另一个!important.
如果您无法编辑CSS文件,您仍然可以在head标记中添加另一个或样式标记.
这个问题出现了几个问题.
问题#1 - css 特异性(如何覆盖重要规则).
根据规范 - 要覆盖这个选择器,你的选择器应该是"更强",这意味着它应该是!重要且至少有1个id,1个类和其他东西 - 根据你创建这个选择器是不可能的(因为你不能改变页面内容).所以唯一可能的选择是将元素放入元素样式(可以用js完成).注意:样式规则也应该具有!important来覆盖.
问题#2 - 背景不是单一属性 - 它是一组属性(参见规范)
所以你真的需要知道你想要改变的属性的确切名称(在你的情况下它将是背景图像)
问题#3 - 如何删除已应用的规则(获取以前的值)？
不幸的是,css没有机制来解除有资格获得元素的规则 - 只能覆盖"更强"的规则.因此,只需将值设置为"继承"或"默认",您就无法解决此任务.您希望看到的原因值既不是父级也不是默认值.要解决这个问题,您有几种选择.
1)您可能已经知道要应用的值是多少.例如,您可以根据使用的选择器找出此值.所以在这种情况下你可能知道对于选择器".image-list li"你需要background-image:url(" http://placekitten.com/150/50 ").如果是这样 - 只是你这个脚本:
jQuery(".image-list li").attr('style', 'background-image: url("http://placekitten.com/150/50") !important; ');
2)如果您不知道该值,那么您可以尝试以这种方式更改页面内容,您想要解散的规则不再符合元素,而您希望显示的规则 - 仍然符合条件.在这种情况下,您可以临时从容器元素中删除id.这是代码:
jQuery("#an-element").attr('id', '');
var backgroundImage = jQuery(".image-list li").css('background-image');
jQuery("#an-element").attr('id', 'an-element');
jQuery(".image-list li").attr('style', 'background-image: ' + backgroundImage + ' !important; ');
这里是小提琴的链接http://jsfiddle.net/o3jn9mzo/
3)作为第三种解决方案 - 您可以生成符合所需选择条件的元素,以找出属性值 - 如下所示:
var backgroundImage = jQuery("<div class='image-list'><li></li></div>").find('li').css('background-image');
jQuery(".image-list li").attr('style', 'background-image: ' + backgroundImage + ' !important; ');
PS:很抱歉回复很晚.