仅使用JavaScript如何获取元素当前位置并减去指定像素数值

可以实现，原生JavaScript无需依赖jQuery即可完成该操作。

注意：直接通过.style.top只能读取到元素内联样式中设置的top属性值，若你的top属性是写在外部CSS文件、内部<style>标签中，该方式无法拿到有效值，推荐使用getComputedStyle获取元素实际渲染生效的计算值，适用于所有样式配置场景。

完整实现代码 #

// 获取目标元素
const targetEl = document.getElementById('element');
// 获取元素的计算样式集合
const computedStyle = window.getComputedStyle(targetEl);
// 解析top属性的数值，自动忽略px单位
const currentTop = parseInt(computedStyle.top, 10);
// 对数值做减法操作，示例为减去100px
const newTop = currentTop - 100;
// 赋值回元素样式，需拼接px单位
targetEl.style.top = `${newTop}px`;

如果你的top属性本身就定义在元素的内联style属性中，也可以直接读取targetEl.style.top解析数值，效果一致。

内容的提问来源于stack exchange，提问作者user16655819