如何使用JavaScript根据屏幕宽度修改自定义HTML属性

你的代码失效的核心原因是：带连字符的自定义属性不能直接通过点语法访问/修改，而且修改HTML属性需要用正确的API，不是直接赋值。下面是两种可行的修改方法：

方法一：使用setAttribute()（通用方案） #

这是修改HTML属性的标准方法，适用于所有自定义属性：

function adjustWidth(){
    var actual_width = window.innerWidth;
    var tocElement = document.getElementById("Table-Of-Contents");
    if(actual_width > 959) {
        tocElement.setAttribute("data-smooth-scroll-offset", "111");
    } else {
        // 建议加上宽度小于等于959时的还原逻辑
        tocElement.setAttribute("data-smooth-scroll-offset", "20");
    }
}

方法二：使用dataset对象（HTML5推荐方案） #

HTML5提供了dataset API来统一管理data-*开头的自定义属性，注意连字符要转成驼峰命名（比如data-smooth-scroll-offset对应dataset.smoothScrollOffset）：

function adjustWidth(){
    var actual_width = window.innerWidth;
    var tocElement = document.getElementById("Table-Of-Contents");
    if(actual_width > 959) {
        tocElement.dataset.smoothScrollOffset = "111";
    } else {
        // 还原默认值
        tocElement.dataset.smoothScrollOffset = "20";
    }
}

额外提示：确保函数被触发 #

只定义函数不会自动执行，需要在页面加载和窗口大小变化时调用：

// 页面加载时执行一次
window.addEventListener('load', adjustWidth);
// 窗口 resize 时实时执行
window.addEventListener('resize', adjustWidth);

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