CODEWITHSUNDEEP
mathjax
John Smith
John Smith

Reputation: 367

Modifying a Mathjax's variable color with javascript

I want to programatically modify the color of variables. I have attempted with this

<p> \(\overline{<font color="#0000EE" id="test_A">A</font>+B}+\overline{B}\)</p>

But it will just break the syntax. I can't break the equation into multiple equations due to it being nested within an overline.

Any tips on adding an identifier to a mathjax variable so I can refer to it within javascript?

Upvotes: 1

Views: 103

Answers (1)

scraaappy
scraaappy

Reputation: 2886

Write css class rules instead, then \class{yourClass}{yourVariable} :

.yourClass{
  color:#0000EE;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-AMS_CHTML-full"></script>

<p> \(\overline{\class{yourClass}{A}+B}+\overline{B}\)</p>

You now have an 'identifier' for your variable, once it's processed, you can easyly change color with javascript

var button = document.querySelector('button');
button.addEventListener('click',changeColor);
function changeColor(){
   document.querySelector('.yourClass').style.color='red';
}
.yourClass{
  color:#0000EE;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-AMS_CHTML-full"></script>

<p> \(\overline{\class{yourClass}{A}+B}+\overline{B}\)</p>
<button>click</button>

Upvotes: 2

Related Questions