Cómo cambiar el valor de contenido de pseudo: elemento anterior por Javascript

Question

Tengo el grap construido por CSS, que se cambia dinámicamente por JS. Muestro gráfico de valores máximo mediante el elemento seudo como:

.graph:before { 
    content:""; //value that want set by JS 
    position:absolute; 
    top:0; 
    left:0; 
} 

Es por eso que necesito para establecer este valor de JS. Intenté $(".graph:before").css("content", hh); pero no ayudó. ¿Cómo obtener ese valor?

Answer 1

No puede modificar pseudo elementos a través de JavaScript ya que no son parte del DOM. Su mejor opción es definir otra clase en su CSS con los estilos que necesita y luego agregar eso al elemento. Dado que no parece ser posible a partir de su pregunta, tal vez deba considerar el uso de un elemento real DOM en lugar de un pseudo uno.

Answer 2

Las personas que todavía están buscando alguna solución del mismo problema, es factible como sigue usando jQuery:

<button id="changeBefore">Change</button> 
<script> 
    var newValue = '22';//coming from somewhere 
    var add = '<style>.graph:before{content:"'+newValue+'"!important;}</style>'; 
    $('#changeBefore').click(function(){ 
     $('body').append(add); 
    }); 
</script> 

Este ejemplo ilustra que al hacer clic en el botón: changeBefore, el valor de .graph:before cambiará según nueva dinámica valor que viene para él.

Para más descripción sobre el cambio de :before o :after estilo elemento o conseguir su contenido:

vamos a suponer que el código HTML es así:

<div id="something">Test</div> 

Y luego están estableciendo su: antes de CSS y diseñarlo como:

#something:before{ 
    content:"1st"; 
    font-size:20px; 
    color:red; 
} 
#something{ 
    content:'1st'; 
} 

Tenga en cuenta también puse content atributo de elemento en sí por lo que puedes sacarlo fácilmente más tarde. Ahora hay un button haciendo clic en el cual, desea cambiar el color de: antes a verde y su tamaño de fuente a 30px. Usted puede lograr que la siguiente manera:

definir un css con su estilo requerido en alguna clase .activeS:

.activeS:before{ 
    color:green !important; 
    font-size:30px !important; 
} 

Ahora puede cambiar: antes de estilo mediante la adición de la clase a su: antes del elemento de la siguiente manera:

<button id="changeBefore">Change</button> 
<script> 
    $('#changeBefore').click(function(){ 
     $('#something').addClass('activeS'); 
    }); 
</script> 

Si lo que desea es obtener el contenido de :before, se puede hacer como:

<button id="getContent">Get Content</button> 
<script> 
    $('#getContent').click(function(){ 
     console.log($('#something').css('content'));//will print '1st' 
    }); 
</script> 

espero que ayude

Answer 3

espero que el siguiente fragmento de código podría ayudar, puede especificar el valor content que desee a través de JS usando la función CSS attr().

JavaScript:

$('.graph').on('click', function() { 
    //do something with the callback 
    $(this).attr('data-before','anything'); //anything is the 'content' value 
}); 

CSS:

.graph:before { 
    content: attr(data-before); //value that that refers to CSS 'content' 
    position:absolute; 
    top: 0; 
    left: 0; 
} 

Answer 4

Creo que hay una solución sencilla utilizando la función attr() para especificar el contenido del elemento seudo.Aquí está un ejemplo de trabajo con el atributo 'título', pero debería funcionar también con atributos personalizados .:

document.getElementById('btn_change1').addEventListener("click", function(){ 
 
    document.getElementById('test_div').title='Status 1'; 
 
}); 
 
    
 
document.getElementById('btn_change2').addEventListener("click", function(){  
 
    document.getElementById('test_div').title='Status 2'; 
 
});

#test_div { 
 
    margin: 4em; 
 
    padding:2em; 
 
    background: blue; 
 
    color: yellow; 
 
} 
 

 
#test_div:after { 
 
    content:attr(title); 
 
    background: red; 
 
    padding:1em; 
 
}

<button id='btn_change1'>Change div:after to [Status 1]</button> 
 
<button id='btn_change2'>Change div:after to [Status 2]</button> 
 

 
<div id='test_div' title='Initial Status'>The element to modify</div>