CODEWITHSUNDEEP
javascripthtmlcss
nathan
nathan

Reputation: 43

css unable to set display:block

I'm unable to use css to set the display to block after i have used javascript to set it to none.

Is this normal or i'm missing something here?

.lightbox:target {
  display: block;
}

function onClickLightBox(event) {
  event.preventDefault();
  target.style.display = "none";
}
lightbox.addEventListener('click', onClickLightBox);

I have had the same problem when using javascript set the display, Then @media was unable to change it once the screen resized.

Upvotes: 0

Views: 800

Answers (2)

Jeffrey Roosendaal
Jeffrey Roosendaal

Reputation: 7147

target.style.display = "none"

should be:

event.target.style.display = "none";

As mentioned by Quentin, it adds an inline style, but I don't recommend it. You may need to use !important, which may make things even more confusing.

I recommend using CSS for styling, and add/remove/toggle a class to the current element through javascript.

Adding a class:

event.target.classList.add = 'myClass';

Removing a class:

event.target.classList.remove = 'myClass';

Toggle a class:

event.target.classList.toggle = 'myClass';

Documentation on classList

Upvotes: 0

Quentin
Quentin

Reputation: 943209

The is normal.

Setting the .style.* properties sets the inline style.

Inline style is more specific than any selector.

Only an !important rule will override an inline rule (unless the inline rule is also !important).

Upvotes: 2

Related Questions