如何无条件从普通HTML元素执行带参JavaScript函数实现DRY文本样式设置

问题结论 #

HTML 不存在原生支持自动执行绑定函数的 call 属性，所有原生可执行脚本的属性均为 on 开头的事件属性，且 <p> 这类普通文本标签确实不支持 onload 事件。

可行实现方案 #

方案1：自定义属性+全局初始化（最推荐，灵活无安全风险）

仅需写一次全局JS逻辑，后续新增元素直接在HTML属性中配置样式即可，支持任意CSS属性自定义。

// 页面DOM加载完成后统一处理所有带custom-style属性的元素
document.addEventListener('DOMContentLoaded', () => {
  document.querySelectorAll('[custom-style]').forEach(el => {
    // 解析属性配置，支持多样式键值对，逗号分隔
    const styleList = el.getAttribute('custom-style').split(',').map(i => i.trim())
    styleList.forEach(item => {
      const [styleKey, styleValue] = item.split(':').map(i => i.trim())
      el.style[styleKey] = styleValue
    })
  })
})

<p custom-style="color: red">Styled text</p>
<p custom-style="color: blue, fontFamily: Arial, fontSize: 20px">Styled text</p>
<p custom-style="color: green, fontWeight: bold">Styled text</p>
<p custom-style="color: fuchsia">Styled text</p>

方案2：data属性+函数调用（完全匹配你设想的写法）

完全复刻你想要的call属性使用逻辑，仅需把自定义属性改为符合HTML规范的data-*前缀格式即可。

注意：该方案使用了eval，如果属性值存在用户可控输入时存在安全风险，仅适合内部项目、无用户输入的场景使用。

function style(el, color, fontFamily = 'sans-serif') {
  el.style.color = color
  el.style.fontFamily = fontFamily
  // 可自行扩展其他样式参数逻辑
}

document.addEventListener('DOMContentLoaded', () => {
  document.querySelectorAll('[data-call]').forEach(el => {
    const funcStr = el.getAttribute('data-call').replace('this', 'el')
    eval(funcStr)
  })
})

<p data-call="style(this, 'red')">Styled text</p>
<p data-call="style(this, 'blue', 'Arial')">Styled text</p>
<p data-call="style(this, 'green')">Styled text</p>
<p data-call="style(this, 'fuchsia', 'Times New Roman')">Styled text</p>

方案3：CSS工具类（纯静态场景首选）

如果样式规则相对固定，不需要运行时动态计算，纯CSS的工具类方案是性能最优的选择。

.text-red { color: red; }
.text-blue { color: blue; font-family: Arial; }
.text-green { color: green; font-weight: bold; }
.text-fuchsia { color: fuchsia; }

<p class="text-red">Styled text</p>
<p class="text-blue">Styled text</p>
<p class="text-green">Styled text</p>
<p class="text-fuchsia">Styled text</p>

内容的提问来源于stack exchange，提问作者Book Of Flames