Question

我一直在尝试使用CSS content属性为某个特定类的元素制作一些“模板”。

我尝试了很多东西。。。

我见过的许多地方告诉我将所有内容都转换为十六进制，所以我做了，直到我看到使用hex将文字字符写入元素，而不是将字符作为HTML进行评估。

然后我试着将字符输入到内容中，然后我得到了完全相同的结果（这使得它看起来好像没有用于十六进制的目的，但很难相信有多少人说它有。。）。

有什么方法可以使用CSS内容属性将HTML内容放入元素中吗？

当然，Stack想要我的来源：

HTML：

<button id="normal" >Show with normal output</button>
<button id="hex" >Show with Hexadecimal output</button>
<div id="class_changer" ></div>

JS：

function changeClass(evt)
{
    class_changer.className = evt.srcElement.id;
}
var class_changer = document.getElementById('class_changer');
var normal = document.getElementById('normal').addEventListener('click', changeClass, true);
var hex = document.getElementById('hex').addEventListener('click', changeClass, true);

和那个神圣不长的CSS：

.normal::before {
    content: '<a href="http://api.addthis.com/oexchange/0.8/forward/facebook/offer?pco=tbx32nj-1.0&amp;url=http%3A%2F%2Fwww.cimtrak.com&amp;username=cimcor" target="_blank"><img alt="Facebook" src="http://cache.addthis.com/icons/v1/thumbs/32x32/facebook.png" /></a>';
}

.hex::before {
    content: '\0027\003c\0061\0020\0068\0072\0065\0066\003D\0022\0068\0074\0074\0070\003A\002F\002F\0061\0070\0069\002E\0061\0064\0064\0074\0068\0069\0073\002E\0063\006F\006D\002F\006F\0065\0078\0063\0068\0061\006E\0067\0065\002F\0030\002E\0038\002F\0066\006F\0072\0077\0061\0072\0064\002F\0066\0061\0063\0065\0062\006F\006F\006B\002F\006F\0066\0066\0065\0072\003F\0070\0063\006F\003D\0074\0062\0078\0033\0032\006E\006A\002D\0031\002E\0030\0026\0061\006D\0070\003B\0075\0072\006C\003D\0068\0074\0074\0070\0025\0033\0041\0025\0032\0046\0025\0032\0046\0077\0077\0077\002E\0063\0069\006D\0074\0072\0061\006B\002E\0063\006F\006D\0026\0061\006D\0070\003B\0075\0073\0065\0072\006E\0061\006D\0065\003D\0063\0069\006D\0063\006F\0072\0022\0020\0074\0061\0072\0067\0065\0074\003D\0022\005F\0062\006C\0061\006E\006B\0022\003e\003c\0069\006D\0067\0020\0061\006C\0074\003D\0022\0046\0061\0063\0065\0062\006F\006F\006B\0022\0020\0073\0072\0063\003D\0022\0068\0074\0074\0070\003A\002F\002F\0063\0061\0063\0068\0065\002E\0061\0064\0064\0074\0068\0069\0073\002E\0063\006F\006D\002F\0069\0063\006F\006E\0073\002F\0076\0031\002F\0074\0068\0075\006D\0062\0073\002F\0033\0032\0078\0033\0032\002F\0066\0061\0063\0065\0062\006F\006F\006B\002E\0070\006E\0067\0022\0020\002F\003e\003c\002F\0061\003e';
}

在JS-Fiddle上查看它，看看你能做些什么！让我知道！谢谢大家！

更新：已解决（等等......）

是的，奇怪的问题有时会接受奇怪的答案（比如迭代DOM ......）但是如果你有更好的解决方案，我会全力以赴。

事实证明，在不使用第三方库或新<template>标签的情况下，评估“CSS模板”的方法可能是执行“模板化”的最佳方式。我仍然不确定）即使它让我的皮肤爬行（如果有人有更好的解决方案，请发布它）。无论哪种方式，I've updated my JSFiddle，所以请查看它！

虽然，我想最好的答案是纯粹在JavaScript中将模板作为字符串，也就是说，如果我们稍后要对它进行评估并将其预先挂起到元素中。是的，这会更有意义......

Answer 1

不，使用普通CSS无法做到这一点。但是，如果您真的想在CSS中保存这些模板，则可以迭代所有元素并使用

window.getComputedStyle(element, ':before').content

获取内容，然后将其添加/附加到元素。要解析HTML，您可以使用jQuery.parseHTML，新的DOMParser（）。parseFromString或虚拟DOM元素。或者，您也可以直接使用.innerHTML，但我不建议这样做..

使用`content`属性作为HTML模板

1 个答案: