纯 css 中的内联/lambda 函数

Question

我希望能够编写 <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 解决方案是什么？

Answer 1

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

您还应该避免将 HTML 添加到数据属性。

您可以使用 JavaScript 完成，不过，通过 replaceWith。

尝试为您要添加的标记创建 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>

Answer 2

如@ErikMartino 在此回答中所述：

content doesn't support HTML, only text. You should probably use javascript, jQuery or something like that.

If content did support HTML you could end up in an infinite loop where content is added inside content.

纯 css 中的内联/lambda 函数

inlining / lambda function in pure css

html

javascript

css

sass

less