加载 MathML 时更新

Question

出于某种原因，MathML 没有获得 .css() 更新，我想知道是否有一种方法可以检查 MathML 何时加载以便更新？

http://jsfiddle.net/njz7xaek/

代码显示问题； MathML 代码没有更新并保持红色，而它应该变成蓝色，就像文本示例一样。

HTML

<span class="col1">text</span>
<br />
<math>
  <mi class="col1">a</mi>
  <mi>x</mi>
  <mo>+</mo>
  <mi class="col1">b</mi>
</math>

CSS

.col1 {
  color:red;
}

JS

$(document).ready(function() {
  $('.col1').css('color', 'blue');
});

有没有办法让 .css() 函数在加载 MathML 后触发，这样它也可以更改它？在我看来 .css() 发生在这之前，所以 MathML 不受它的影响。我希望有一个像

这样的简单解决方案

$(MathML).ready(function() {
  $('.col1').css('color', 'blue');
});

但这似乎不起作用...

Answer 1

<mi> 元素似乎没有任何与之关联的内联样式定义，例如，如果您这样做 $("mi")[0].style，您会得到一个未定义的错误。

通过执行以下操作可以解决此问题：

var nStyle = $('<style>.col1 { color: blue; }</style>');

$("html > head").append(nStyle);

这将创建一个 "global" 样式标签并将其附加到头部。

示例位于：http://jsfiddle.net/njz7xaek/5/（需要 Firefox）

Update when MathML is loaded