2

我有一个滑块脚本和一个模板外部样式表，我必须使用它们。我被指示只使用 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 也不起作用。

有什么解决办法吗？

4

4 回答 4

0

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

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

这是一个演示：http: //jsfiddle.net/AGuvg/

于 2013-09-14T04:04:38.003 回答
0

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

$('img')[0].style.setProperty( 'width', '500px', 'important' );
于 2013-09-14T04:09:52.497 回答
0

您可以动态生成额外的样式表。此示例适用于 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);
于 2013-09-14T05:27:49.533 回答
0

如果您需要应用动态生成的宽度，唯一的方法是添加!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);

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

于 2013-09-14T05:38:18.227 回答