Home / Questions / 35150
Accepted
akko
Asked: 2020-11-22 15:51:41 +0800 CST 2020-11-22 15:51:41 +0800 CST

如何使用 Javascript 更改元素的 ::after 和 ::before？

  • 772

我需要更改下一个 HTML 元素的 after 和 before 伪元素的content属性，而不使用 jQuery 之类的库。如果我用 CSS 做类似的事情，它会是这样的：

#text::before{background:red;display:block,content:"HolaMundo";}
#text::after{background:blue;color:red,font-size:100px;}

用Javascript做这件事的方法是什么？

var text = document.getElementById("text");
text...
javascript

4 Answers

  1. Best Answer

    您可以设置 ::after 和 ::before 以默认加载属性的内容。

    在示例中，我使用了“title”属性：

    #text::after{
  content: attr(title);
}

    然后用 Javascript 更新它。

    document.querySelector("#text").setAttribute("title" , "Nuevo texto")

    任何一个

    document.querySelector("#text").title = "Nuevo texto";
    • 5

  2. 不幸的是，无法直接使用 JavaScript 选择或更改伪元素。但是，它可以通过 CSS 和 JavaScript 的组合来完成。例如，您可以在 psuedo 元素中创建一些具有不同内容的类，并使用 JavaScript 更改该类：

    CSS：

    #text::before {
    content: "HolaMundo";
}

#text.nombre {
    content: "Mi nombre es...";
}

    JavaScript：

    // Decir nombre
document.querySelector("#text").classList.add("nombre");

// Decir HolaMundo
document.querySelector("#text").classList.remove("nombre");
    • 3

  3. 正如他们所说，您不能更改伪元素，因为它们不属于 DOM。

    在下面的代码中，我在属性选择器的帮助下进行了模拟，并介绍了它是如何完成的：js

    var text = document.getElementById('texto');

function changeToAfter(id) {
  
  // Creamos el atributo data-class con el contenido after
  document.getElementById(id).setAttribute('data-class', 'after');
}

function changeToBefore(id){

  // Creamos el atributo data-class con el contenido before
  document.getElementById(id).setAttribute('data-class', 'before'); 
}

document.getElementById('after').onclick = function() {
  
    changeToAfter(text.id);
};

document.getElementById('before').onclick = function() {
  
    changeToBefore(text.id);
};
    [data-class=before]::before{
  background: red;
  content: 'Hello ';
  background: red;
}

[data-class=after]::after {
  content: ' world!';
  background: pink;
}

/* solo para dar un poooco de estilo a los botones que están feísimos */
button {
  outline: 0; 
  width: 100px;
  margin-bottom: 5px;
  cursor: pointer;
  display: block;
}

button:hover {
  background: gray;
}
    <p id="texto"> wonderful </p> 

<!-- Solo para simulación -->
<button id="before">Before</button> 
<button id="after">After</button>

    • 3

  4. 您可以做的一件事是创建一个元素<style id="myStyle">，您可以在其中添加内容，从而对情况有更多的控制。我已经使用它并且效果很好。

    • 0