jquery - 如何在覆盖 css 中定义的样式时更新属性？

Question

这个问题建立在我之前的两个问题之上。

我有一个必须包含的 css(下面代码段中的 first_style.css)。我已将其缩减为 img { height:auto; } - 这是必须包含的内容。我可以在之前或之后添加任何样式。加载图像后，我运行一个脚本来更新图像的高度 - 见下文。

如果我不包含 first_style.css，一切正常。但是，如果我必须包含它，我就无法找到使我的脚本正常工作的方法。我该如何解决？

$(function() {
  $('.images div a img').on('load', function() {
    $(this).attr('height', $(this).closest('.images').attr('imgheight'));
  });
});

img {
  height:none !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

<link rel='stylesheet' href='http://www.yu51a5.com/wp-content/themes/pinboard-child/first_style.css' type='text/css' media='all' />

<div imgheight="300px" class="images">
  <div><a> <img src=" http://www.yu51a5.com/wp-content/uploads/2015/01/goldenhorseman.jpg " /></a> </div>
  <div><a> <img src=" http://www.yu51a5.com/wp-content/uploads/2015/01/bronze-horseman.jpg "/></a> </div>
</div>

Answer 1

试试这个:

$(function() {
  $('.images div a img').on('load', function() {
    $(this).css('height', $(this).closest('.images').attr('imgheight'));
  });
});

img {
  height:none !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

<link rel='stylesheet' href='http://www.yu51a5.com/wp-content/themes/pinboard-child/first_style.css' type='text/css' media='all' />

<div imgheight="300" class="images">
  <div><a> <img src=" http://www.yu51a5.com/wp-content/uploads/2015/01/goldenhorseman.jpg " /></a> </div>
  <div><a> <img src=" http://www.yu51a5.com/wp-content/uploads/2015/01/bronze-horseman.jpg "/></a> </div>
</div>

Onload 事件导致调整大小将在图像完成加载时产生，而不是之前。