I need to change the color and style of mtext elements in jquery

Question

¿Has anybody tried to access the "mtext" elements generated by MathJax.js library from jquery?

I have something like this:

<mrow>
   <mo>(</mo>
       <mtext>Producción‌·de‌·naranjas&nbsp;&nbsp;</mtext>
   <mo>)</mo>
</mrow>

but i cant select any mtext element. I tried using $('mtext').addClass('red') but it didnt work.

Thanks

Answer 1

It works for me using the same code as you: $('mtext').addClass('red');.

Perhaps you are not waiting until the markup has actually been loaded/added to the DOM before running the jQuery selector? That would prevent jQuery from finding any elements to add the class to.

Answer 2

MathJax removes the MathML elements and replaces them with HTML elements to perform the layout in most browsers. So there are no mtext elements after that. The HTML-CSS output jax does retain the structure of the MathML and marks the spans that it creates with classes that correspond to the original nodes. So try

$('.mtext').addClass('red');

though it might just be easier to add

.mtext { color: red }

to your CSS rather than using jQuery to add it later, unless you need to change it dynamically.