即使它被JavaScript更改后也能获得CSS值

Question

我正在制作一个影响一类菜单的动画，它将菜单滑入和滑出屏幕的左侧。但是因为我改变了应用程序另一部分的宽度值，我不得不以某种方式调查css，

这就是我在CSS中所拥有的：

1. 宽度（600px（取决于设备））

使用Javascript我更改：

1. 宽度（相对数量）
2. 左（宽）

左边很容易，因为我可以做-element.offsetWidth但宽度更难，因为我不知道它会改变多少，我也不想在其中硬编码。

有没有人知道让我在变化之前调查元素css的方法？ （因为它是用代码编写的）

到目前为止我尝试过的：

1. element.offsetWidth（不起作用，因为它返回当前宽度而不是css中写入的宽度）
2. element.style.width（没有用，因为它返回一个空字符串）

注意：有一个类似的问题How do I retrieve an HTML element's actual width and height?，但答案给出了当前的宽度，我想要CSS设置的宽度（加载文档时）

简化代码：

Answer 1

您可以在浏览器（如chrome）中使用developer tools来查看和使用css。

如果您在Sources tab in Chrome dev tools中设置Javascript断点，则可以直观地看到在应用javascript之前元素的外观。

如果您想以编程方式在JavaScript控制台日志.style.height和.style.width中查看元素的宽度和高度。

例如console.log(document.getElementById('my-element').style.width)