来自属性值的样式元素 [英] Style element from value in attribute
问题描述
我实际上首先问过这个问题，但这是我的错，因为我在那儿无法正确描述事物，因此无法获得答案。但是现在我将在这里描述所有内容。实际上，我想要一个javascript函数，该函数可以找到带有完整文档中任何元素的特定前缀的类。让我们以html标记为例：
I have actually asked this question first, but its my fault because I couldn't describe the thing correctly there, so I couldn't get the answer. But now I will describe everything here. Actually, I want a javascript function that can find a class with a specific prefix of any element in the full document. Lets take a example of a html markup :
<body class="c:bg-#008eff">
<h1 class="c:bg-#ff5c5c">Hello, <span class="c:bg-white">World !</span></h1>
在上面的示例中，我们获得了通用前缀 c：bg-在所有课程中。在前缀之后，我们找到css颜色的名称和十六进制。考虑一下，一个函数 understand（）可以：
In the above example, we get a common prefix c:bg- in all the classes. After the prefix we find names and hex of css colors. Consider, a function understand() that can :
（1）查找所有带有前缀 c：的类。
(1) Find all the classes with the prefix c: in an html document.
（2）查找 c：前缀之后的内容，例如 c：bg-将指示它是css背景属性，而 c：text-将指示其是css颜色属性，等等。
(2) Looks for what is after the c: prefix, e.g. c:bg- will indicate that it is css background property, while c:text- will indicate thats it is css color property, etc.
（3）查找要设置的值，例如 c：bg-＃008eff 表示它是具有＃008eff等值的css背景属性。
(3) Looks for the value to set, e.g. c:bg-#008eff indicates that it is css background property with value #008eff etc.
（4）删除 c ：bg-， c：text-等从字符串中获取的类的前缀，并使用其余部分定义样式。
(4) Removes the c:bg-, c:text- , etc. prefixes from the class obtained as string, and uses the remaining portion to define style.
我们有一个例子：
<body class="c:bg-#008eff">
<h1 class="c:bg-#ff5c5c">Hello, <span class="c:bg-white">World !</span></h1>
在浏览器窗口中上述代码的输出中，我们将找到背景为＃008eff的正文， h1，背景为＃ff5c5c，跨度为背景白色。
In the output of the above code in browser window, we will find the body with background #008eff, h1 with background #ff5c5c and span with background white.
另一个示例：
<body>
<h1 class="c:text-#ff5c5c c:pad-20px">Hello, <span class="c:text-#008eff c:mar-20px">World !</span></h1>
在浏览器窗口的上述代码输出中，我们将找到颜色为＃ff5c5c和填充的h1 20px，跨度为＃008eff，边距为20px。
In the output of the above code in browser window, we will find h1 with color #ff5c5c and padding 20px and span with color #008eff and margin 20px.
是的，非常重要！如果重复相同类型的代码，则最后一个覆盖第一个。
And, yes very important ! If same type of code is repeated then last one overwrite the first one.
示例：
<h1 class="c:bg-blue c:bg-red">Hello</h1>
<!-- Executes red background -->
我希望，我现在很清楚！那么，我的梦想可以成为事实吗？是否可以使用 understand（）函数？
I wish, I am very clear now ! So, can my dream be a truth ? Is this possible to make the understand() function ?
感谢您给我的时间
推荐答案
下面是使用 data-* 属性的一种更好的解决方案：
Here's how I'd tackle with a better solution, using data-* attribute:
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 / zh-CN / docs / Web / API / CSSStyleDeclaration / cssText
否则，您可以执行以下操作：
Otherwise you could do something like:
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>
这篇关于来自属性值的样式元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
