使用JavaScript制作文本域字号切换按钮功能失效求助

问题原因 #

你代码的核心错误是动态设置CSS属性的语法不符合规范：
当你需要通过变量指定style对象的属性名时，不能使用.运算符，.运算符会把后面的字符当作固定的属性名处理，你写style.stys时，JS会尝试给style对象新增一个名为stys的自定义属性，而不会解析为你传入的fontSize参数，所以真正的字体大小属性没有被修改，自然不会生效。你console.log打印的只是你自己新增的自定义属性值，不是实际生效的fontSize值。

修正方案 #

把动态属性调用的写法从.改为方括号[]即可，修改两处代码：

1. 样式赋值行改为 document.querySelector('textarea').style[stys] = sizes;
2. 日志打印行改为 console.log(document.querySelector('textarea').style[stys]);

额外小修正：你HTML里的textarea闭合标签写错了，应该是</textarea>，建议修正避免其他渲染问题。

修正后的完整JS代码 #

function size(stys,sizes,i){
    let buttons = document.getElementsByTagName('button')
    // 改用方括号传入动态属性名
    document.querySelector('textarea').style[stys] = sizes;
    console.log(document.querySelector('textarea').style[stys])
    for(let y = 0;y<buttons.length;y++){
        buttons[y].style.textDecoration = 'none'
    }   
    buttons[i].style.textDecoration = 'underline'
}

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