Question

我有一个滑块脚本和一个模板外部样式表，我必须使用。我被指示只使用custom.css来覆盖模板外部样式表。

我的问题是，模板中的滑块css有一个！important。滑块脚本计算图像的宽度和高度，并通过内联css插入。我希望内联css在级联中获得更多功能，而不是模板样式表中的！important。

例如：

在html doc中，加载滑块脚本后：

<img src="slide1.jpg" style="width: 980.2545515px;" />

在模板样式表中：

img {
width: 500px !important;
}

我尝试使用jquery，例如：

$("img").css("width","500px");

但是，它不会覆盖任何内容。请注意，我需要自动生成的宽度来覆盖任何内容。但我似乎找不到覆盖宽度的方法：500px！important - width：auto / width：inherit也不起作用。

任何解决方案？

Answer 1

你无法使用.css()方法真正做到这一点，但你可以使用.attr()方法来实现，但这会覆盖你已经拥有的任何其他内联样式。

$('img').attr('style', 'width:500px !important;')

以下是演示：http://jsfiddle.net/AGuvg/

Answer 2

不是jquery本身，但你可以使用setProperty这样：

$('img')[0].style.setProperty( 'width', '500px', 'important' );

Answer 3

您可以动态生成额外的样式表。此示例适用于Chrome，但我不知道它在其他浏览器中的行为：http://jsfiddle.net/mj2Um/。

var stylesheet;
function setWidth(value) {
    stylesheet && stylesheet.remove();
    stylesheet = $('<style>img{width:' + value + 'px !important;}</style>');
    stylesheet.appendTo('body');
}
setWidth(150);

Answer 4

如果您需要动态生成的宽度是应用的宽度，唯一的方法是在内联样式中添加!important。你可以这样做：

var styleAttr = $(".slider-image").attr("style");

styleAttr += " !important";  
/* ^^ assumes styleAttr is just 'width: 980.2545515px' and so 
becomes 'width:   980.2545515px !important' - if the style attribute is more 
complex than this you'd need a bit more sophisticated parsing of it */

$(".slider-image").attr('style', styleAttr);

这将强制动态宽度覆盖样式表！重要的一个。

使内联css比外部更强大！重要吗？

4 个答案: