纯 css 中的内联 / lambda 函数

问题描述

我希望能够编写 <div class="inlined">content</div> 左右，并将其转换为其他一些 html，使用内容，并按照 inlined 的定义。我想在纯 CSS 中执行此操作，即没有 javascript。

例如，这将是一个函数 inlined：

<div data-descr="content"/> -> <div class="container"><div class="topright">content</div></div>

一些实现“喜欢”：

div[data-descr] {
  content: <div class="container"><div class="topright">attr(data-descr)</div></div>;
}

如果不能使用纯 CSS，less/sass/js 的解决方案是什么？

解决方法

由于您的数据属性包含 HTML，因此您不能为此使用 CSS 内容属性，因为您的 HTML 将被视为字符串 - 它不会被解析。

无论如何，您还应该避免将 HTML 添加到数据属性中。

不过，您可以通过 replaceWith 使用 JavaScript 来实现。

尝试为要添加的标记创建一个 object。然后你可以引用它来获取 HTML

// helper function to handle new element creation
const createNewElement = content => {
  const container = document.createElement("div");
  container.classList.add("container");

  const inner = document.createElement("div");
  inner.classList.add("top-right");
  inner.innerHTML = dataObject[content];

  container.append(inner);

  return container;
}

// create an object to get the HTML for a specific describtion attribute
const dataObject = {
  content: `<div class="red">red text</div>`,content2: `<div class="green">green text</div>`,content3: `<div class="blue">blue text</div>`,}

// get the elements you want to change
const targetElements = document.querySelectorAll("[data-descr]");

// loop through them and swap them
targetElements.forEach(element => {
  const content = element.dataset.descr;
  const newElement = createNewElement(content)
  element.replaceWith(newElement)
})

.red {
  color: red;
}

.green {
  color: green;
}

.blue {
  color: blue
}

<div data-descr="content"></div>
<div data-descr="content2"></div>
<div data-descr="content3"></div>

,

正如@ErikMartino 在此答案中所述：https://stackoverflow.com/a/5865996/8106583

内容不支持 HTML，只支持文本。你可能应该使用 javascript、jQuery 或类似的东西。

如果内容确实支持 HTML，您可能会陷入无限循环，其中 内容添加到内容中。