使用JavaScript根据选中项修改元素样式未生效问题求助

核心问题有两个，按优先级修改即可生效：

• 移除不必要的页面刷新逻辑
  你的代码末尾执行了location.reload()，所有通过JS在当前页面修改的样式、DOM属性都仅保存在浏览器临时内存中，页面重新加载后会完全恢复为初始加载的状态，因此你看不到修改后的样式。直接删除这行代码即可。
• 修正transform属性的无效写法
  transform属性需要明确指定变换类型，你直接赋值25deg属于无效值，浏览器会直接忽略该样式。如果要实现旋转效果，需要补充rotate()包裹角度值。

另外补充一个优化点：你代码中的pos、namePart变量没有声明，属于隐式全局变量，容易引发变量污染问题，建议补充let声明。

修正后参考代码 #

function updateStyle() {
    const head = document.getElementById("Heads").src;
    const pos = head.indexOf("/Heads/");
    let namePart = head.substring((pos + 7), (pos + 7 + 6))
    namePart = namePart.replace('.', '');

    switch (namePart) {
        case "Head2":
            document.getElementById("EarsX").style.top = "35em"
            document.getElementById("EarsX").style.transform = "rotate(25deg)"
            document.getElementById("EarsY").style.top = "35em"
            document.getElementById("EarsY").style.left = "82em"
            document.getElementById("EarsY").style.transform = "rotate(-25deg)"
            console.log("updated Ears")
    }
    // 删掉刷新代码
    // location.reload();
}

修改完成后你再在开发者工具中查看元素样式，就能看到JS赋值的内联样式已经覆盖了原有CSS定义的样式。

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