JSXGraph 网站上的 CSS 示例是否适用于 JSXGraph？

Question

我尽力从 JSXGraph 网站上复制了这个例子： https://jsxgraph.uni-bayreuth.de/wiki/index.php/Using_CSS_styles

这是缩写 HTML:

<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8">

  <title>Covid Sandbox</title>
  <meta name="description" content="Covid Sandbox">

</head>

<body>

  <script src="third party/jquery-3.5.1.min.js"></script>
  
  <script type="text/javascript" charset="UTF-8" src="https://cdn.jsdelivr.net/npm/jsxgraph@1.1.0/distrib/jsxgraphcore.js"></script>

  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/jsxgraph@1.1.0/distrib/jsxgraph.css" />

    <div id="jsxgbox">
    </div>
</body>
</html>

<style>
  .jsxgDefaultFont {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 18;
  }

  .myFont {
      font-family: Palatino, "Palatino Linotype", "Palatino LT STD", "Book Antiqua", Georgia, serif;
      border: 1px solid black;
      padding: 5px;
      border-radius:5px;
  }
</style>  

<script src="js/test.js"></script>

这是我在 test.js 中测试的一些 Javascript:

JXG.Options.text.cssClass = 'jsxgDefaultFont';

board = JXG.JSXGraph.initBoard('jsxgbox', {
    boundingbox: [-1,15,15,-1],
    showcopyright: false,
    axis: true,
    renderer: 'canvas',
    defaultAxes: {
        x: {
            strokeColor: 'grey',
            ticks: {
                visible: 'inherit',
            }
        },
        y: {
            strokeColor: 'grey',
            ticks: {
                visible: 'inherit',
            }
        },
    },
    zoom: {
        factorX: 1.25,
        factorY: 1.25,
        wheel: true,
        needshift: false,
        eps: 0.1
    },

    showZoom: false,
    showNavigation: false,
});

        var txt = board.create('text', [0,0, " <span id='par'>(</span> Hello world <span id='par'>)</span>"], 
          {
            cssClass:'myFont', strokeColor:'red',
            highlightCssClass: 'myFontHigh',
            fontSize:20
          });

board.update();

内联 HTML 甚至没有被正确解释（显示 span\ Hello World \span）。不确定我在这里做错了什么。

Answer 1

确实，wiki 中的示例已经过时了。 CSS 类的优先级，默认 CSS 样式和 JSXGraph 有点 delicate.Please，看看 API 文档：https://jsxgraph.org/docs/symbols/Text.html#cssDefaultStyle . 如果要覆盖font-family，则必须将cssDefaultStyle设置为空字符串：

JXG.Options.text.cssDefaultStyle = '';
JXG.Options.text.highlightCssDefaultStyle = '';

const board = JXG.JSXGraph.initBoard('jxgbox', {
    boundingbox: [-1,15,15,-1],
    showcopyright: false,
    axis: true,
    // ...
    });

    var txt = board.create('text', [3,4, 
        " <span id='par'>(</span> Hello world <span id='par'>)</span>"
     ], {
        cssClass:'myFont',
        highlightCssClass: 'myFont',
        strokeColor: 'red',
        highlightStrokeColor: 'blue',
        fontSize:20
      });

在 https://jsfiddle.net/2jq8srpv/3/

现场观看

JSXGraph 网站上的 CSS 示例是否适用于 JSXGraph？

Does the CSS example on JSXGraph's website for JSXGraph work?

html

javascript

css

jquery

jsxgraph