我实际上首先问过这个问题，但这是我的错，因为我无法正确描述那里的事情，所以我无法得到答案。但现在我将描述这里的一切。实际上，我想要一个 javascript 函数，它可以找到具有完整文档中任何元素的特定前缀的类。让我们以 html 标记为例:
<body class="c:bg-#008eff">
<h1 class="c:bg-#ff5c5c">Hello, <span class="c:bg-white">World !</span></h1>
在上面的例子中，我们在所有类中得到一个公共(public)前缀c:bg-。在前缀之后，我们找到 css 颜色的名称和十六进制。考虑一个函数understand()，它可以:
(1) 查找html文档中所有以c:为前缀的类。
(2) 查找 c: 前缀之后的内容，例如c:bg- 表示它是 css 背景属性，而 c:text- 表示它是 css 颜色属性等。
(3) 查找要设置的值，例如c:bg-#008eff 表示它是 css 背景属性，值为 #008eff 等。
(4) 从以字符串形式获取的类中删除 c:bg-、c:text- 等前缀，并使用剩余部分定义样式.
我们有我们的例子:
<body class="c:bg-#008eff">
<h1 class="c:bg-#ff5c5c">Hello, <span class="c:bg-white">World !</span></h1>
在浏览器窗口中上述代码的输出中，我们将找到背景为 #008eff 的 body、背景为 #ff5c5c 的 h1 和背景为白色的 span。
另一个例子:
<body>
<h1 class="c:text-#ff5c5c c:pad-20px">Hello, <span class="c:text-#008eff c:mar-20px">World !</span></h1>
在浏览器窗口中上述代码的输出中，我们会发现 h1 的颜色为#ff5c5c，内边距为 20px，span 的颜色为#008eff，边距为 20px。
而且，是的，非常重要!如果重复相同类型的代码，则最后一个代码会覆盖第一个代码。
示例:
<h1 class="c:bg-blue c:bg-red">Hello</h1>
<!-- Executes red background -->
但愿，我现在很清楚了!那么，我的梦能成真吗？这可以使 understand() 功能吗？
感谢您抽出时间
最佳答案
以下是我如何使用 data-* 属性来解决更好的解决方案:
const applyStyle = el => el.style.cssText = el.dataset.style;
document.querySelectorAll("[data-style]").forEach(applyStyle);<h1 data-style="color:#f0b; background:#0bf;">TEST</h1>
<h1 data-style="color:#b0f; background:#fb0;">TEST</h1>https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration/cssText
否则你可以这样做:
const props = {
bg: 'background',
text: 'color',
pad: 'padding'
};
const understand = el => {
const c_classes = [...el.classList].filter(name => name.startsWith('c:'));
return el.style.cssText = c_classes.map(k => {
const pv = k.split('c:')[1].split('-');
return `${props[pv[0]]}:${pv[1]}`;
}).join(';');
}
const ELZ = document.querySelectorAll("[class^='c:'], [class*=' c:']");
ELZ.forEach(understand);<h1 class="test c:bg-yellow c:pad-20px c:text-#0bf bla">
Hello, <span class="c:bg-red">World !</span>
</h1>关于javascript - 根据属性中的值设置元素的样式，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58465606/