如何仅在桌面端调整文本外边距？排查我的JavaScript代码问题

问题原因 #

你的代码存在两个核心问题：

• 类型不匹配的比较：window.innerWidth返回的是数字类型的像素值（比如768），但你把它和字符串"768px"做比较，这种逻辑会导致判断条件不符合预期。
• 未监听窗口尺寸变化：当前代码仅在页面首次加载时执行一次，用户缩放浏览器窗口时，不会重新计算并更新样式。

修正后的JavaScript写法 #

如果坚持用JS实现，修改如下：

<p id="myID">Lorem ipsum dolor sit amet, prima harum elitr te pri. Vix partiendo sententiae ad. Duo at amet dicam tempor. Numquam ceteros concludaturque in eum, id nec adhuc aliquando scriptorem, has ea consetetur cotidieque consectetuer. In verear neglegentur eam.</p>   

<script>
// 定义处理样式的函数
function setMargin() {
    let screenWidth = window.innerWidth;
    const element = document.getElementById("myID");
    // 和数字768比较，而非带单位的字符串
    if (screenWidth > 768) {
        element.style.marginLeft = "150px";
    } else {
        element.style.marginLeft = "0px";
    }
}

// 页面加载时执行一次
setMargin();
// 监听窗口尺寸变化，实时更新样式
window.addEventListener("resize", setMargin);
</script>

更推荐的CSS媒体查询方案 #

这类响应式样式需求，用CSS媒体查询更简单高效，无需JavaScript：

<style>
#myID {
    margin-left: 0; /* 默认移动端样式 */
}

/* 桌面端（屏幕宽度大于768px时）应用样式 */
@media screen and (min-width: 769px) {
    #myID {
        margin-left: 150px;
    }
}
</style>

<p id="myID">Lorem ipsum dolor sit amet, prima harum elitr te pri. Vix partiendo sententiae ad. Duo at amet dicam tempor. Numquam ceteros concludaturque in eum, id nec adhuc aliquando scriptorem, has ea consetetur cotidieque consectetuer. In verear neglegentur eam.</p>

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