Modifica dynamic della proprietà del contenuto CSS

Un mio amico sta noleggiando un negozio online da un’azienda. È in grado di scegliere tra diversi modelli e ha la capacità di ignorare il CSS predefinito e aggiungere snippet di javascript. Mi ha chiesto di aiutarla a fare diversi cambiamenti, ma c’è qualcosa che non posso affrontare: il pulsante Aggiungi al carrello. Nel CSS qui sotto c’è una proprietà “content” che contiene un valore predefinito. Vorrei modificare dynamicmente il valore di questa proprietà, in base all’attributo lang HTML. Hai idea di come potrei ottenere questo? (So ​​come ottenere il valore dell’attributo lang.Il mio problema sta cambiando il valore della proprietà “content”)

#add_to_cart:before { display: block; font-family: 'sosa'; font-size: 35px; content: "Ä"; padding-right: 5px; font-weight: 400; width: 71px; height: 71px; line-height: 65px; text-align: center; text-indent: 0; text-shadow: none; color: #fff; } 

Prova questo:

HTML:

  ... 
example

CSS:

 #add_to_cart:before { display: block; font-size: 35px; content: attr(data-content); padding-right: 5px; font-weight: 400; width: 71px; height: 71px; line-height: 65px; text-align: center; text-indent: 0; text-shadow: none; color: red; } 

JS:

 $('#add_to_cart').attr('data-content', (document.documentElement.lang == 'en' ? "x" : "y")); 

Vedrai che il carattere prima dell”esempio ‘cambia quando viene cambiato lang attr di .

Scrivi una funzione Javascript che aggiorna il CSS. Javascript può accedere all’attributo HTML.

document.documentElement.lang