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

如何解决JSXGraph网站上用于JSXGraph的CSS示例是否有效？

我尽力从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,-1],showcopyright: false,axis: true,renderer: 'canvas',defaultAxes: {
        x: {
            strokeColor: 'grey',ticks: {
                visible: 'inherit',}
        },y: {
            strokeColor: 'grey',},zoom: {
        factorX: 1.25,factorY: 1.25,wheel: true,needshift: false,eps: 0.1
    },showZoom: false,showNavigation: false,});

        var txt = board.create('text',[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）。不知道我在做什么错。

解决方法

确实，Wiki中的示例已过时。 CSS类，默认CSS样式和JSXGraph的优先级有些微妙。请查看API文档：https://jsxgraph.org/docs/symbols/Text.html#cssDefaultStyle。如果要覆盖字体系列，则必须将cssDefaultStyle设置为空字符串：

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

const board = JXG.JSXGraph.initBoard('jxgbox',{
    boundingbox: [-1,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网站上用于JSXGraph的CSS示例是否有效？

如何解决JSXGraph网站上用于JSXGraph的CSS示例是否有效？

解决方法

相关推荐