Question

我要从div中获取文本值，并将其设置为变量，然后需要在其上添加括号和反斜杠。最终结果应为：“ \ f333”。一旦有了“ \ f333”，就需要将其添加到伪元素中。

HTML

<div class="icon">f333</div>

jQuery

var iconOne = """ + "\" $('.icon').text() + "";
$('.nav:before').css('content', iconOne);

CSS（我希望最终结果是什么

.nav:before {
  content: "\f333";
 }

不幸的是，CSS没有被应用于伪元素，我认为它与jQuery有关。请帮助正确应用括号和反斜杠？

Answer 1

可以通过jQuery设置<?php header("Access-Control-Allow-Origin: http://localhost:1113") header("Access-Control-Allow-Methods: GET, PUT, POST") echo "this is a test" ?>的数据属性（例如.nav），然后从CSS引用此属性：

data-symbol

您无法使用Javascript访问伪元素，因为它们不在DOM中。

但是，您可以动态创建一个nav:before { content: attr(data-symbol); }元素，在其中定义一个新的CSS类，然后将该类添加到该元素中：

style

let div = document.getElementById('div');
let icon = document.getElementById('icon').textContent;
let button = document.getElementById('button');

button.addEventListener('click', (e) => {
  const style = document.createElement('style');
  style.textContent = `.icon-victory::before { content: "${icon} "; }`;
  document.body.appendChild(style);
  div.textContent = div.textContent.replace("wants", "has");
  div.classList.add('icon-victory');
  document.body.removeChild(button);
})

#icon {
  display: none;
}

如何为该变量添加括号和退格键？

1 个答案: