Is there a way to do this css code with javascript langage or jquery and have the same result? I don't find any sample for this.
#readonlyEmail_label:lang(fr)::before{
content: 'Adresse courriel vérifiée. Vous pouvez continuer.';
font-family: 'Open Sans', sans-serif;
font-weight: bold;
font-size: 14px;
width:650px;
padding-bottom: 24px;
display: block;
}
#readonlyEmail_label:lang(en)::before{
content: 'Email address verified. You can now continue.';
font-family: 'Open Sans', sans-serif;
font-weight: bold;
font-size: 14px;
width:650px;
padding-bottom: 24px;
display: block;
}
Thanks
This can be done by editing the document stylesheet from JavaScript, like so:
const lang = {
fr: {
text: `content: 'Adresse courriel vérifiée. Vous pouvez continuer.'`,
color: `color: #F00`
},
en: {
text: `content: 'Email address verified. You can now continue.'`,
color: `color: #0F0`
}
};
const css = document.styleSheets[0];
css.addRule('.readonlyEmail_label:lang(fr)::before', lang.fr.text);
css.addRule('.readonlyEmail_label:lang(fr)::before', lang.fr.color);
css.addRule('.readonlyEmail_label:lang(en)::before', lang.en.text);
css.addRule('.readonlyEmail_label:lang(en)::before', lang.en.color);.readonlyEmail_label:lang(fr)::before {}
.readonlyEmail_label:lang(en)::before {}<div class="readonlyEmail_label" lang="en"><q>This English quote has a <q>nested</q> quote inside.</q></div>
<div class="readonlyEmail_label" lang="fr"><q>This French quote has a <q>nested</q> quote inside.</q></div>