使用JavaScript函数修改DOM样式时style参数传递失效如何解决

你代码中使用点运算符访问style对象属性时，.parameter会被JS解析为访问名为parameter的固定属性，不会把parameter当做变量解析其实际值（也就是你传入的"color"），因此样式赋值不生效。

将点运算符替换为方括号属性访问语法即可，方括号内可以传入变量、字符串表达式，JS会自动解析取值作为属性名访问。

修改后代码 #

styleToDom("first", "color", "green")
        
function styleToDom(id, parameter, value){
     // 改用方括号访问动态属性名
     document.getElementById(id).style[parameter] = value
}

• 如果要修改带横杠的CSS原生属性（比如background-color），参数可以传入两种格式：
  • 驼峰命名格式：styleToDom("first", "backgroundColor", "#fff")
  • 原生横杠格式：styleToDom("first", "background-color", "#fff")
    两种格式在方括号访问语法下都可正常生效。
• 可以在赋值后加一行console.log(document.getElementById(id).style[parameter])验证赋值是否成功。

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