Coder Board Community | Java Script | schriftgröße per button ändern

currentSize = 12; function GetFontObject() { return document.getElementById("flexibleFont"); } function Bigger() { if(currentSize < 100) currentSize++; GetFontObject().style.fontSize = currentSize + "px"; } function Smaller() { if(currentSize > 1) currentSize--; GetFontObject().style.fontSize = currentSize + "px"; }

HTML> <head><title>dgssdfg</title></head> <script language="javascript"> currentSize = 12; function GetFontObject() { return document.getElementById("flexibleFont"); } function Bigger() { if(currentSize < 100) currentSize++; GetFontObject().style.fontSize = currentSize + "px"; } function Smaller() { if(currentSize > 1) currentSize--; GetFontObject().style.fontSize = currentSize + "px"; } </script> <body> <font id="flexibleFont" style="font-size: 12px;"> Bal Bla Bla</font> <button onClick="Bigger()">Groesser</button> <button onClick="Smaller()">Kleiner</button> </body> </

HTML>

code:

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
65:
66:
67:
68:
69:
70:
71:
72:
73:
74:
75:
76:
77:
78:
79:
80:
81:
82:
83:
84:
85:
86:
87:
88:
89:
90:
91:
92:
93:
94:
95:
96:
97:
98:
99:
100:
101:
102:

< HTML>
<head>
  <title>Font Settings</title>
<script language="javascript">
<!--
var currentSize = 20;

function changeFont(val){
  GetFontObject().style.fontFamily = val;
}

function changeCol(col){
  var regexp = /^#[0-9a-fA-F]{6}$/
  if(regexp.exec(col))
    GetFontObject().style.color = col;
  else alert ('Please enter valid color code (i.e. #FF0000)');
}

function GetFontObject() {
  return document.getElementById("flexibleFont");
}

function setSize(newSize){
  if(newSize >= 8 && newSize <= 100){
    currentSize = parseInt(newSize);
    GetFontObject().style.fontSize = currentSize + "px";
  } else alert ('Please enter a valid size (8 - 100)');
}

function changeSize(changeby) {
  newSize = currentSize + changeby;
  if(newSize >= 8 && newSize <= 100)
    currentSize = newSize;
  GetFontObject().style.fontSize = currentSize + "px";
  showIt();
}

function showIt(){
  document.getElementById('sizzor').value = currentSize;
}
//-->
</script>
</head>
<body onLoad="showIt()">
<table width="100%">
  <tr height="120">
    <td align="center">
      <button onClick="changeSize(10)">+&nbsp;+</button>
    </td>
    <td align="center">
      <button onClick="changeSize(2)">+</button>
    </td>
    <td width="330" align="center">
      <font id="flexibleFont" style="font-size: 20px;">Texten</font>
    </td>
    <td align="center">
      <button onClick="changeSize(-2)">&nbsp;-&nbsp;</button>
    </td>
    <td align="center">
      <button onClick="changeSize(-10)">&nbsp;-&nbsp;-&nbsp;</button>
    </td>
  </tr>
</table>
<table width="100%">
  <tr>
    <td align="center">
      Size:
    </td>
    <td align="center">
      <input type="text" id="sizzor" size="7">
    </td>
    <td align="center">
      <button name="setsiz" onClick="setSize(getElementById('sizzor').value)">Setzen</button>
    </td>
  </tr>
  <tr>
    <td align="center">
      Color:
    </td>
    <td align="center">
      <input type="text" id="cozzor" size="7">
    </td>
    <td align="center">
      <button name="setcol" onClick="changeCol(getElementById('cozzor').value)">Setzen</button>
    </td>
  </tr>
  <tr>
    <td align="center">&nbsp;</td>
    <td align="center">
      < SELECT onChange="changeCol(this.value)">
        <option value="#FF0000">Red</option>
        <option value="#0000FF">Blue</option>
        <option value="#000000">Black</option>
        <option value="#00FF00">Green</option>
      </ SELECT>
    </td>
  </tr>
</table>
</body>
</ HTML>