调用外部JS修改HTML元素类无响应问题求助

你的代码里有两个核心错误导致点击无效果，直接修正这两处就能解决问题：

错误1：修改类名的属性用错了 #

DOM元素的类名属性是className，不是class——class是HTML标签里的属性名，在JS里操作DOM元素时必须用className。

错误2：给onclick赋值的方式错误 #

你用了字符串'hide()'这种形式，这是过时的写法，现在应该直接赋值函数引用，也就是去掉引号和括号，直接写hide或show。

修正后的完整JS代码 #

function changeClass(Id, Val) {
    // 把class改成className
    document.getElementById(Id).className = Val;
}

function show() {
    changeClass('resize', 'bS resize');
    changeClass('main', 'mS main');
    changeClass('sidebar', 'ad a sS sidebar');
    
    changeClass('title', 'b tS title');
    changeClass('topbar', 'bd b tpS topbar');
    changeClass('footer', 'bd b fS footer');
    
    // 直接赋值函数引用，不用字符串
    document.getElementById('resize').onclick = hide;
}

function hide() {
    changeClass('resize', 'bH resize');
    changeClass('main', 'mH main');
    changeClass('sidebar', 'ad a sH sidebar');
    
    changeClass('title', 'b tH title');
    changeClass('topbar', 'bd b tpH topbar');
    changeClass('footer', 'bd b fH footer');
    
    // 直接赋值函数引用，不用字符串
    document.getElementById('resize').onclick = show;
}

额外优化建议 #

你还可以用classList来简化类名操作，比如element.classList.add('xxx')、element.classList.remove('xxx')或者element.classList.toggle('xxx')，这样不用每次都把所有类名重新写一遍，更不容易出错。示例：

// 简化版的切换逻辑示例
function toggleLayout() {
    const btn = document.getElementById('resize');
    const main = document.getElementById('main');
    
    btn.classList.toggle('bS');
    btn.classList.toggle('bH');
    main.classList.toggle('mS');
    main.classList.toggle('mH');
    // 其他元素同理
}

先按你原来的逻辑修正确保功能正常，之后可以考虑用这种更简洁的方式重构代码。

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