文章/答案/技术大牛

发布

社区首页 >问答首页 >JSXGraph网站上针对JSXGraph的CSS示例有效吗？

问JSXGraph网站上针对JSXGraph的CSS示例有效吗？
EN

Stack Overflow用户

提问于 2020-11-07 09:01:44

回答 1查看 78关注 0票数 2

我尽了最大努力将这个示例从JSXGraph网站复制到这里：https://jsxgraph.uni-bayreuth.de/wiki/index.php/Using

以下是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)。不知道我到底做错了什么。

javascript

html

jquery

css

jsxgraph

回答 1

Stack Overflow用户

回答已采纳

发布于 2020-11-09 18:24:16

事实上，维基中的例子已经过时了。CSS类、默认CSS样式和JSXGraph的优先级是有一点delicate.Please的，看看API docs：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,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/上观看现场直播

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/64723456

复制

相似问题

问JSXGraph网站上针对JSXGraph的CSS示例有效吗？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问JSXGraph网站上针对JSXGraph的CSS示例有效吗？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问JSXGraph网站上针对JSXGraph的CSS示例有效吗？
EN