Using CSS styles: Difference between revisions

From JSXGraph Wiki
No edit summary
No edit summary
Line 42: Line 42:


===The JavaScript code===
===The JavaScript code===
<source lang="html">
<style type="text/css">
.myFont {
    font-family: Palatino, "Palatino Linotype", "Palatino LT STD", "Book Antiqua", Georgia, serif;
    border: 1px solid black;
    padding: 5px;
    border-radius:5px;
}


.myFontHigh {
    font-family: Palatino, "Palatino Linotype", "Palatino LT STD", "Book Antiqua", Georgia, serif;
    border: 1px dashed black;
    padding: 5px;
    border-radius:5px;
}
.myDefaultFont {
    border: 1px solid black;
    padding: 1px;
    border-radius:3px;
    font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;
}
</style>
</source>
<source lang="javascript">
<source lang="javascript">
JXG.Options.text.cssClass = 'myDefaultFont';
var board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-5,5,5,-5]});
var txt = board.create('text', [1,2, "Hello world"],
          {
            cssClass:'myFont', strokeColor:'red',
            highlightCssClass: 'myFontHigh',
            fontSize:20
          });
var p = board.create('point', [0,0]);
</source>
</source>


[[Category:Examples]]
[[Category:Examples]]

Revision as of 09:11, 10 October 2012

The JavaScript code

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

.myFontHigh {
    font-family: Palatino, "Palatino Linotype", "Palatino LT STD", "Book Antiqua", Georgia, serif;
    border: 1px dashed black;
    padding: 5px;
    border-radius:5px;
}


.myDefaultFont {
    border: 1px solid black;
    padding: 1px;
    border-radius:3px;
    font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;
}
</style>
JXG.Options.text.cssClass = 'myDefaultFont';

var board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-5,5,5,-5]});

var txt = board.create('text', [1,2, "Hello world"], 
          {
            cssClass:'myFont', strokeColor:'red',
            highlightCssClass: 'myFontHigh',
            fontSize:20
          });

var p = board.create('point', [0,0]);