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

问题描述 投票:1回答:1

我正在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标记上应用样式。

javascript jquery css
1个回答
0
投票

你有没有理由使用.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>
© www.soinside.com 2019 - 2024. All rights reserved.