-1

I'm making an animation that effects a class of menu's, It slides the menu in and out the left side of the screen. But because I change the width value for another part of the app, I have to look into the css somehow,

This is what I have in CSS:

  1. width (600px (dependant on device with))


Using Javascript I change:

  1. Width (a relative amount)
  2. left (-width)

The left is easy, because I can just do -element.offsetWidth But the width is harder, because I don't know how much it's going to change, and I don't want to hardcode it in either.

Does anyone know a way that lets me look into the elements css, before it's changed? (as it's written in code)

What I've tried so far:

  1. element.offsetWidth (Didn't work because it returns the current width and not the width written in the css)
  2. element.style.width (Didn't work because it returns an empty string)


NOTE: There is a similar question How do I retrieve an HTML element's actual width and height?, but the answer gives the current width, and I want the width that's set by the CSS (while loading the document)

Simplified code:

For some reason I couldn't get the code in here so I made a picture

NightOwl888
  • 55,572
  • 24
  • 139
  • 212
Florisweb
  • 38
  • 1
  • 8
  • if you dont think the duplicate is correct, include your code and any error/debugging information you have that's relevant. Like the current answer, you stated "that just gives me empty strings". So post that code as well. Perhaps this isn't a duplicate, but it's hard to tell because you didn't provide much of what you have tried/currently have moreso just want you want to happen (which sounds like a duplicate). – jdmdevdotnet Mar 05 '18 at 17:38

1 Answers1

0

You can use developer tools in a browser such as chrome to look into and play around with the css.

If you set a Javascript breakpoint in the Sources tab in Chrome dev tools you can visually see what the elements look like before the javascript is applied.

If you want to programatically see the width and height of an element in JavaScript console log .style.height and .style.width.

e.g. console.log(document.getElementById('my-element').style.width)

Harry Mumford-Turner
  • 856
  • 10
  • 17
  • Ah that's a handy feature! But I need my javascript to calculate it so it knows how wide to animate the element. – Florisweb Mar 05 '18 at 17:29
  • @Floris consider accessing the width and the height with document.getElementById('my-element').style.width – Harry Mumford-Turner Mar 05 '18 at 17:30
  • That's the problem, it returns an empty string. – Florisweb Mar 05 '18 at 17:31
  • 1
    So you should have included that in your question. And don't think I'm being mean, but since you didn't include that in your question, time has been spent using that as a solution. When that could have been avoided if you included what you've tried and any errors/debugging information thats relevant. Again, you're new and that's totally fine just giving you a heads up. – jdmdevdotnet Mar 05 '18 at 17:36