Can't read or modify CSS properties of an element

I’ve been working on a simple private project, and this issue has stopped me for a complete day. I’ve tried everything I know and asked for help many times to Google Gemini but… no solution has been found.

I have a

HTML element intended to be a menu. It has many other elements inside, but the error still insists if I comment on all the lines inside that
, so the div could be as simple as this:

<div class="show" id="main_menu">
</div>

That element is set in position absolute with CSS, applying .show class:

.show {
            position: absolute;
                right: 0;
                top: 80px;
}

And I have another CSS class to toggle using JavaScript, which is:

 .hide {
            position: absolute;
                right: -1000px;
                top: 80px;
        }

Pretty easy, isn’t it? Well, here comes the problem.
I use a JS function to change between the two classes, and I can’t make it work:

function mainMenu() {
	const main_menu = document.getElementById("main_menu");

	if (main_menu.style.right == 0) {
		main_menu.classList.remove("show");
		main_menu_desktop.classList.add("hide");		
	} else {
		main_menu.classList.remove("hide");
		main_menu.classList.add("show");		
	}
}

When I execute the function, it changes classes for the first time, but that’s all. I can’t make it show again. In fact, it never enters the ELSE part.

If I set a console.log(main_menu.style.right); it shows a blank line in the console.

Why??

I can’t understand it. Even the IA I use to help me tells me it should work.

This must be a very easy and stupid issue, but I can’t find the answer and I’m stuck.

Could you help me, please?

Oh, I forgot to mention that the

element has its width and height set in another CSS rule, so it’s pretty visible.

why are you using this to check? does the right property change?

Yes.

The right property is all I want to change, so I check to see if the div element is in its original absolute position (right = 0) or it has already changed (right = -1000px).

and how is mainMenu function triggered?

and what is this? is it a different element?

The function is triggered through an onclick event placed in a button.

can you create a codepen or something where you reproduce the issue?
there too many missing things to reproduce your issue

Oh, that’s a mistake I made trying to simplify the case here (in the real case main_menu is called main_menu_desktop).

Ignore it and read that line as it was main_menu.

Ok, I’try that. I’ve never used CodePen.

if it’s not codepen anything else is fine

I just can’t put the code you posted somewhere and run it on its own, there are pieces missing

Ok, I’ve made a lot of changes in CodePen for you to see a simplified version of the problem. I’ve deleted all the HTML elements that you don’t need.

Forget design, I’ve just left a basic structure that has no visual sense.

So, again, the issue:

If you click on the menu button (red), the black block at the right moves once to the right. Ok, but when you click again, it should return, and it doesn’t do it. If you see the console, there’s no info about its right CSS position.

Here’s the CodePen:

use getComputedStyle(main_menu_desktop).right to check the value

Wow! It works!!

It’s great. Thank you very much.

Now, I need to know WHY the standard method (.style.right) didn’t work.

Why do we need to use getComputedStyle() and when?

I don’t know, probably .style.right need a specific set up for a value to appear there, or it works only to set values and not to retrieve them :person_shrugging: More research is needed here

But getComputetStyle retrieve the final value of all the CSS applied to the element, including default values, so you can be sure that those are the actual things applied to the element, and it seems to be more reliable than other methods

Oh, ok. I’ll use it by default.
Thank you very much, Illenia. You’ve been very kind :hugs: