Question

我正在一个wordpress / php网站上，在javascript / jquery中找到一个div之后，我想在其中设置img标签的样式。

需要发生的HTML代码是：

<div class="page-hero page-hero--reports cf">
   <figure class="page-hero__image img-fit" itemprop="image" itemscope="" itemtype="http://schema.org/ImageObject">
      <img src="">       // where opacity:0.7 needs to be apllied.  
   </figure>
   <div class="page-hero__content-contain">
      <h2 class="page-hero__title-top page-hero__title--heavy">Trans Mountain Pipeline: NEB Releases New Report, Recommends Approval </h2>
      <h2 class="page-hero__title-bottom page-hero__title--heavy"> More Coverage</h2>
   </div>
</div>

这是我尝试过的方法，但是不起作用。

$(".page-hero--reports").each(function () {
    if ($(this).find(".page-hero__title-top").not(":empty").length > 0 && $(this).find(".page-hero__title-bottom").not(":empty").length > 0) {
        $(this).find(".img-fit img").css("opacity", "0.7");
    } 
});

问题陈述：

我想知道我需要在上面的脚本中进行哪些更改，以使其在页面加载时将样式应用于img标签。

Answer 1

您使用.each的原因吗？

怎么样：

// find elements
$(".page-hero--reports img").css("opacity", "0.2");

像这样：

// find elements
$(".page-hero--reports img").css("opacity", "0.2");

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="page-hero page-hero--reports cf">
   <figure class="page-hero__image img-fit" itemprop="image" itemscope="" itemtype="http://schema.org/ImageObject">
      <img src="https://cdn.cnn.com/cnnnext/dam/assets/190311171619-sarah-sanders-0311-medium-tease.jpg">
   </figure>
   <div class="page-hero__content-contain">
      <h2 class="page-hero__title-top page-hero__title--heavy">Trans Mountain Pipeline: NEB Releases New Report, Recommends Approval </h2>
      <h2 class="page-hero__title-bottom page-hero__title--heavy"> More Coverage</h2>
   </div>
</div>

找到div后，如何在javascript / jquery中设置img标签的样式？

1 个答案: