2

Como posso trocar o estilo da uma classe :after utilizando jquery?

tentei assim mas não deu certo:

HTML:

<div class="box"></div>

Jquery:

$('.box:after').css({
    borderColor:' #c12 transparent transparent transparent'
});
1
  • Neo, edite sua pergunta e inclua o html. Commented 4/04/2018 às 21:02

1 Resposta 1

2

pseudo-elementos (::after, ::before etc.) não estão na árvore do DOM, portanto não estão acessíveis via JavaScript.

Esses elementos só são visíveis na tela, mas não estão na árvore de elementos do DOM, conforme dito. Caso queira alterá-los, terá que adicionar uma classe específica.

Exemplo:

$("#b1").click(function(){
   $(".box").addClass("novaclasse");
});

$("#b2").click(function(){
   $(".box").removeClass("novaclasse");
});
.box:after{
   content: 'after';
   border: 10px solid #000;
   border-color: #000 transparent transparent transparent;
}

/* classe que irá alterar o :after */
.box.novaclasse:after{
   border-color: #c12 transparent transparent transparent;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">
   principal
</div>
<br>
<input id="b1" type="button" value="Clique para alterar">
<br>
<em>Irá adicionar a classe .novaclasse</em>
<br><br>
<input id="b2" type="button" value="Clique para voltar original">
<br>
<em>Irá remover a classe .novaclasse</em>

10
  • deu certo, obrigado! jsfiddle.net/kdqbz7rt/2
    – Neo
    Commented 5/04/2018 às 0:13
  • Não entendi, votou pra fechar como duplicata da sua própria resposta e respondeu de novo aqui?
    – brasofilo
    Commented 5/04/2018 às 3:16
  • Perguntas duplicadas tudo bem, respostas auto-duplicadas parece estranho...
    – brasofilo
    Commented 5/04/2018 às 3:20
  • Se você tivesse medalha de ouro na tag JavaScript, seu voto ia fechar a pergunta imediatamente. E se respondesse e depois fechasse imediatamente, ia ser uso indevido do sistema.
    – brasofilo
    Commented 5/04/2018 às 3:25
  • Bueno, a conversa entrou em loop. See ya!
    – brasofilo
    Commented 5/04/2018 às 3:27

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .