Question

这个问题建立在前两个问题的基础上。

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

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

＆＃13;

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

＆＃13;

img {
  height:none !important;
}

＆＃13;

<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>

＆＃13;

Answer 1

试试这个：

＆＃13;

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

＆＃13;

img {
  height:none !important;
}

＆＃13;

<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>

＆＃13;

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

Answer 2

这是你问题的工作小提琴：

https://jsfiddle.net/utrsrb70/

HTML：

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

JS：

$(function() {

  $('.images img').each(function(){
    console.log($(this).attr('src'));

    $(this).attr('height', $(this).closest('.images').attr('imgheight'));

  })


});

CSS：

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

Answer 3

您可以使用element.data('height');属性并使用$( document ).ready(function() { $('.images img').each(function() { $(this).attr('height',$('.images').data("height")); }); });

在脚本中获取该数据属性

这是工作示例

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div data-height="300px" class="images">
  <img src="http://www.yu51a5.com/wp-content/uploads/2015/01/goldenhorseman.jpg" />
  <img src="http://www.yu51a5.com/wp-content/uploads/2015/01/bronze-horseman.jpg" />
</div>

{{1}}

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

3 个答案: