javascript - 如何让 SpriteSpin 响应？

Question

我正在使用的网站是使用 Twitter Bootstrap 制作的，并且具有完全响应能力。我已经成功地让 SpriteSpin 与我的网站一起工作，但有一个问题，我无法让它像我网站的其余部分一样响应，因为它向图像所在的 div 添加了内联 css。

JS 看起来像这样:

首先它调用图像:

$(function(){
  var frames = [
      "folder/image.jpg",
      (other images)
    ];

然后这个:

 $("#mali").spritespin({
    width     : 960,
    height    : 540,
    (other code)
  });

我如何更改这个固定的宽度和高度并将 css 类或 w/h 设置为 100% 以便响应。

我已经尝试用它向容器添加 css 类，但没有成功:

$( "div" ).addClass( "myClass" );

我认为这里的问题是脚本以某种方式添加了内联 css

<div class="spritespin spritespin-instance" unselectable="on" style="overflow: hidden; position: relative; width: 480px; height: 327px;">

在自行车图像上使用检查元素时，您可以在官方 SpriteSpin 网站(下面的链接)上看到它。

帮我解决这个问题或向我推荐其他响应迅速且适用于移动触摸的 360 图像 Sprite 旋转解决方案。

SpriteSpin:http://spritespin.ginie.eu/

Answer 1

您可以通过在您自己的 CSS 指令后添加 !important 来覆盖 CSS。最简单的形式:

background: red            !important;

如果您在 HTML 中有内联样式属性:

<div style="background: red;">
    The inline styles for this div should make it red.
</div>

你可以试试这个 CSS:

div[style] {
   background: yellow !important;
}

但在生产代码中依赖它并不是真正好的做法。更多信息: http://css-tricks.com/when-using-important-is-the-right-choice/ , http://css-tricks.com/override-inline-styles-with-css/