从 HTML 元素 (<span>) 执行 JavaScript 函数，没有条件但有参数

Question

我想这样做

document.getElementById('demo1').style.color = "red";
document.getElementById('demo2').style.color = "blue";
document.getElementById('demo3').style.color = "green";
document.getElementById('demo4').style.color = "fuchsia";

<p id="demo1">Styled text</p>
<p id="demo2">Styled text</p>
<p id="demo3">Styled text</p>
<p id="demo4">Styled text</p>

但是不想那样做，这样更好：

function style(obj, color) {
  obj.style.color = color;
}

<p call="style(this, 'red')">Styled text</p>
<p call="style(this, 'blue')">Styled text</p>
<p call="style(this, 'green')">Styled text</p>
<p call="style(this, 'fuchsia')">Styled text</p>

但这不起作用。我正在寻找一些 DRY 样式文本方式，第一种方式非常乏味。 JavaScript 方式令人愉快，因为它允许更大的灵活性（比如在参数中添加 fontFamily）。是否有一些 HTML 属性可以像上面的 call 一样工作？有没有其他同样好的文本样式设置方式？我考虑过 onload，但这只适用于 certain selected tags。

This 相关问题很接近，但它是关于网页的，而不是关于特定的 HTML 标签。

Answer 1

您可以尝试创建自己的 call 排序属性。唯一的问题是 this 不起作用 - 您必须通过父函数引用它。

function style(obj, color) {
  obj.style.color = color;
}
document.querySelectorAll('p').forEach(elem => eval(elem.getAttribute('data-call')));

<p data-call="style(elem, 'red');">Styled text</p>
<p data-call="style(elem, 'blue')">Styled text</p>
<p data-call="style(elem, 'green')">Styled text</p>
<p data-call="style(elem, 'fuchsia')">Styled text</p>

从 HTML 元素 (<span>) 执行 JavaScript 函数，没有条件但有参数

Executing JavaScript function from an HTML element (<span>) with no conditions but with arguments

html

javascript

css

attributes