Как изменить изображение в зависимости от цвета фона родительского элемента?

Question

У меня есть два изображения: изображение с черной стрелкой и изображение с белой стрелкой.

      <Header />
      <div>{children}</div>
      <Link href='#top' css={arrowLinkStyle}>
        <img src='ArrowUp.svg' />
      </Link>
      <Footer />

Я хочу отобразить изображение черной стрелки, когда фон родителя белый , И отобразите изображение с белой стрелкой, когда фон родительского элемента черный.

Как бы мне этого добиться?

Answer 1

вы можете использовать метод getComputedStyle ().

Вот как это работает: `$ yourChildElement = document.getElementById ('child'); $ parent = $ yourChildElement.parentElement;

$back_color = window.getComputedStyle($parent,null).getPropertyValue('background- 
color');

// it will return rgba(255,255,255) or ...

Теперь вы можете управлять им.