检查 div 的显示 CSS

Question

How can I do something like this?

Example I have 2 divs:

I wanna do something like this... If 'some-class' display=none; then 'some-other-class' display=none;

What do I need to use to do something like this jQuery, javascript? Thank you.

Answer 1

Can you provide a code snippet or more clarity?

Answer 2

With jQuery, you can use:

$('.element').is(':visible') 
   ? $('.other-class').hide() 
   : $('.other-class').show()

Or with vanillaJS

element.style.display === 'block' 
  ? other_element.style.display = 'block'
  : other_element.style.display = 'none'

Or even better way (I think)

other_element.style.display = element.style.display

The last way take the element style display value and assign to other_element style display.

Answer 3

Here is a method taking advantage of css variables. I set a variable named --class-display on the root element, and then I can use that variable in any place throughout my css. When I want to hide that element, I can use js to change the root variable property, and it will apply throughout my css.

 document.querySelector(".someClass").addEventListener("click", async () => { const root = document.documentElement.style; root.setProperty("--class-display", "none"); await new Promise(r => setTimeout(r, 1000)); root.setProperty("--class-display", "block"); });

 :root { --class-display: block; } body { display: flex; justify-content: space-around; } div { height: 4rem; aspect-ratio: 1; background: black; color: white; }.someClass, .otherClass { display: var(--class-display); }

 <div class="someClass"><b>CLICK ME</b></div> <div class="otherClass"></div>