Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta http-equiv="Content-Style-Type" content="text/css">
  <meta http-equiv="Content-Script-Type" content="text/javascript">
  <title>文字サイズのコントロール</title>
<style type="text/css">
<!--
body {
  font-size: 100%;
}
#Test1{
  font-size: 150%;
}
#Test2{
  font-size: 200%;
}
#Test3{
  font-size: 70%;
}
#Test4{
  font-size: 50%;
}
-->
</style>
<script type="text/javascript"><!--
window./*@cc_on @if(@_jscript) attachEvent('on' + @else @*/addEventListener(/*@end @*/ 'load', function (evt) {
  document.getElementById('textZoom')./*@cc_on @if(@_jscript) attachEvent('on' + @else @*/addEventListener(/*@end @*/ 'change', function (evt) {
    var select = evt.target || evt.srcElement;
    select.ownerDocument.body.style.fontSize = select.value + '%';
    evt.preventDefault();
  },false);
},false);
--></script>
</head>
<body>
​
<form action="#">
  <p>
    <select id="textZoom" name="textZoom">
      <option value="50">50%</option>
      <option value="70">70%</option>
      <option value="100" selected>100%</option>
      <option value="150">150%</option>
      <option value="200">200%</option>
    </select>
  </p>
</form>
​
<p id="Test1">標準的な大きさ</p>
<p id="Test2">少し大きい</p>
<p id="Test3">かなり大きい</p>
<p id="Test4">少し小さい</p>
<p id="Test5">かなり小さい</p>
​
</body>
</html>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers