如何使用JavaScript设置CSS的top属性？

问题原因 #

• 未添加合法CSS单位：style.top属于CSS长度属性，仅接受带单位的有效值（如200px），你直接传入纯数字字符串属于无效值，会被浏览器自动忽略，因此读取时返回空字符串。
• 元素定位属性不支持top：top属性仅对position非static的元素生效，若你的菜单元素是默认的position: static，赋值后也不会生效。
• 全局变量名冲突：你使用top作为变量名，浏览器全局作用域下存在内置的window.top对象，会导致变量取值异常。

修正后的代码 #

// 避免使用top作为变量名，防止全局冲突
const topOffset = document.getElementById(element).offsetTop;
const menu = document.getElementById('contentMenu');
// 先设置元素定位属性，按需修改为absolute/fixed/sticky都可
menu.style.position = 'relative';
// 赋值时拼接px单位即可，不需要手动调用toString
menu.style.top = topOffset + 'px';
// 验证输出
console.log("menu" + menu.style.top);

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