我尽力从 JSXGraph 网站复制此示例: https://jsxgraph.uni-bayreuth.de/wiki/index.php/Using_CSS_styles
这是缩写的 HTML:
<!doctype html>
<html>
<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)。不确定我在这里做错了什么。
相关分类