Seleccionar y manipular pseudo-elementos CSS como :: before y :: after usando javascript (o jQuery)

Este artículo fue aprobado por expertos para que tengas la seguridad de la veracidad de nuestra esta división.

Solución:

También puede pasar el contenido al pseudo elemento con un dato attribute y luego use jQuery para manipular eso:

En HTML:

foo

En jQuery:

$('span').hover(function()
    $(this).attr('data-content','bar');
);

En CSS:

span:after 
    content: attr(data-content) ' any other text you may want';

Si desea evitar que aparezca el ‘otro texto’, puede combinar esto con la solución de seucolega de esta manera:

En HTML:

foo

En jQuery:

$('span').hover(function()
    $(this).addClass('change').attr('data-content','bar');
);

En CSS:

span.change:after 
    content: attr(data-content) ' any other text you may want';

Pensaría que esta sería una pregunta simple de responder, con todo lo demás que jQuery puede hacer. Desafortunadamente, el problema se reduce a un problema técnico: css: after y: before que las reglas no son parte del DOM, y, por lo tanto, no se puede modificar con los métodos DOM de jQuery.

Allí están formas de manipular estos elementos usando JavaScript y / o soluciones CSS; cuál utilice depende de sus requisitos exactos.

---

Comenzaré con lo que se considera ampliamente el “mejor” enfoque:

1) Agregar / eliminar una clase predeterminada

En este enfoque, ya ha creado una clase en su CSS con una :after o :before estilo. Coloque esta “nueva” clase más adelante en su hoja de estilo para asegurarse de que anule:

p:before 
    content: "foo";

p.special:before 
    content: "bar";

Luego, puede agregar o eliminar fácilmente esta clase usando jQuery (o JavaScript vanilla):

$('p').on('click', function() 
    $(this).toggleClass('special');
);

    $('p').on('click', function() 
      $(this).toggleClass('special');
    );

p:before 
  content: "foo";
  color: red;
  cursor: pointer;

p.special:before 
  content: "bar";

This is a paragraph.
This is another paragraph.

• Pros: Fácil de implementar con jQuery; altera rápidamente varios estilos a la vez; impone la separación de preocupaciones (aislando su CSS y JS de su HTML)
• Contras: CSS debe estar escrito previamente, por lo que el contenido de :before o :after no es completamente dinámico

---

2) Agregue nuevos estilos directamente a la hoja de estilo del documento

Es posible usar JavaScript para agregar estilos directamente a la hoja de estilo del documento, incluyendo :after y :before estilos. jQuery no proporciona un atajo conveniente, pero afortunadamente el JS no es tan complicado:

var str = "bar";
document.styleSheets[0].addRule('p.special:before','content: "'+str+'";');

var str = "bar";
document.styleSheets[0].addRule('p.special:before', 'content: "' + str + '";');

p:before 
  content: "foo";
  color: red;

This is a paragraph
This is another paragraph

.addRule() y el relacionado .insertRule() Los métodos están bastante bien soportados hoy.

Como variación, también puede usar jQuery para agregar una hoja de estilo completamente nueva al documento, pero el código necesario no es más limpio:

var str = "bar";
$('').appendTo('head');

var str = "bar";
$('').appendTo('head');

p:before 
  content: "foo";
  color: red;

This is a paragraph
This is another paragraph

Si hablamos de “manipular” los valores, no solo de agregarlos, también podemos leer la existencia :after o :before estilos usando un enfoque diferente:

var str = window.getComputedStyle(document.querySelector('p'), ':before') 
           .getPropertyValue('content');

var str = window.getComputedStyle($('p')[0], ':before').getPropertyValue('content');
console.log(str);

document.styleSheets[0].addRule('p.special:before', 'content: "' + str+str + '";');

p:before 
    content:"foo";
    color: red;

This is a paragraph
This is another paragraph

Podemos reemplazar document.querySelector('p') con $('p')[0] cuando se usa jQuery, para un código un poco más corto.

• Pros: alguna string se puede insertar dinámicamente en el estilo
• Contras: los estilos originales no se modifican, solo se anulan; El uso repetido (ab) puede hacer que el DOM crezca arbitrariamente grande

---

3) Modificar un DOM diferente attribute

También puedes usar attr() en tu CSS para leer un DOM en particular attribute. (Si un navegador admite :before, es compatible attr() también.) Combinando esto con content: en un CSS cuidadosamente preparado, podemos cambiar el contenido (pero no otras propiedades, como margen o color) de :before y :after dinamicamente:

p:before 
    content: attr(data-before);
    color: red;
    cursor: pointer;

JS:

$('p').on('click', function () 
    $(this).attr('data-before','bar');
);

$('p').on('click', function () 
    $(this).attr('data-before','bar');
);

p:before 
    content: attr(data-before);
    color: red;
    cursor: pointer;

This is a paragraph.
This is another paragraph.

Esto se puede combinar con la segunda técnica si el CSS no se puede preparar con anticipación:

var str = "bar";

document.styleSheets[0].addRule('p:before', 'content: attr(data-before);');

$('p').on('click', function () 
    $(this).attr('data-before', str);
);

var str = "bar";
document.styleSheets[0].addRule('p:before', 'content: attr(data-before) !important;');

$('p').on('click', function() 
  $(this).attr('data-before', str);
);

p:before 
  content: "foo";
  color: red;
  cursor: pointer;

This is a paragraph.
This is another paragraph.

• Pros: No crea infinitos estilos adicionales
• Contras:attr en CSS solo se puede aplicar a cadenas de contenido, no a URL o colores RGB

Aunque los navegadores los renderizan a través de CSS como si fueran otros elementos DOM reales, los pseudo-elementos en sí mismos no forman parte del DOM, porque los pseudo-elementos, como su nombre lo indica, no son elementos reales y, por lo tanto, no puede seleccionarlos y manipularlos directamente con jQuery (o alguna API de JavaScript para el caso, ni siquiera la API de selectores). Esto se aplica a cualquier pseudoelemento cuyos estilos esté intentando modificar con un script, y no solo ::before y ::after.

Solo puede acceder a estilos de pseudoelementos directamente en tiempo de ejecución a través de CSSOM (piense window.getComputedStyle()), que no está expuesto por jQuery más allá de .css(), un método que tampoco admite pseudoelementos.

Sin embargo, siempre puede encontrar otras formas de evitarlo, por ejemplo:

• Aplicar los estilos a los pseudo-elementos de una o más clases arbitrarias, luego alternar entre clases (ver la respuesta de seucolega para un ejemplo rápido) – esta es la forma idiomática ya que hace uso de selectores simples (que los pseudo-elementos no lo son) para distinguir entre elementos y estados de elementos, la forma en que están destinados a ser utilizados

• Manipular los estilos que se están aplicando a dichos pseudo-elementos, alterando la hoja de estilo del documento, que es mucho más un truco.

Comentarios y valoraciones

Si te animas, puedes dejar un ensayo acerca de qué le añadirías a esta crónica.

---

---

Utiliza Nuestro Buscador