使用 javascript 修改 Mathjax 的可变颜色

Question

我想以编程方式修改变量的颜色。我尝试过这个

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

但它只会破坏语法。由于方程嵌套在上划线中，我无法将方程分解为多个方程。

关于向 mathjax 变量添加标识符以便我可以在 javascript 中引用它的任何提示？

Answer 1

写 css class 规则，然后 \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>

您的变量现在有了一个 'identifier'，处理完成后，您可以使用 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>

使用 javascript 修改 Mathjax 的可变颜色

Modifying a Mathjax's variable color with javascript

mathjax