style

2024年01月16日(火) 09時36分更新 icon 項目のみ表示/展開表示の切り替え

文字色の設定

style.color
以下のボタンをクリックすると文字の色を赤から青に変更します。
何色 
<html>
<head>
  <meta charset="utf-8">
</head>
<body>

<style type="text/css">
  .RED{
    color: red;
  }
  </style>
  <span class="RED" id="id1">何色</span>
  <script type="text/javascript">
  function test1(){
    var o=document.getElementById('id1');
    o.style.color="Blue";
  }
  </script>
  <form name="test1Form">
    <input type="button" value="色の変更" onclick="test1()" />
  </form>
</body>
</html>

文字色の設定(クラス名を変更)

className
以下のボタンをクリックすると文字の色を赤から青に変更します。
文字色が赤色のクラスを文字色が青色のクラスにclassNameプロパティで変更します。
何色 
<html>
<head>
  <meta charset="utf-8">
</head>
<body>

<style type="text/css">
  .RED2{
    color: red;
  }
  .BLUE2{
    color: blue;
  }
  </style>
  <span class="RED2" id="id5">何色</span>
  <script type="text/javascript">
  function test5(){
    var o=document.getElementById('id5');
    o.className="BLUE2";
  }
  </script>
  <form name="test5Form">
    <input type="button" value="色の変更" onclick="test5()" />
  </form>
</body>
</html>

文字背景色の設定

style.backgroundColor
以下のボタンをクリックすると文字の背景色を黄色から水色に変更します。
何色 
<html>
<head>
  <meta charset="utf-8">
</head>
<body>

<style type="text/css">
  .YELLOW{
    background-color: yellow;
  }
</style>

  <span class="YELLOW" id="id2">何色</span>
  <script type="text/javascript">
  function test2(){
    var o=document.getElementById('id2');
    o.style.backgroundColor="cyan";
  }
  </script>
  <form name="test2Form">
    <input type="button" value="色の変更" onclick="test2()" />
  </form>
</body>
</html>

文字の大きさ

style.font-size
以下のボタンをクリックすると文字ごとに文字の大きさを変更します。
文字列をsplitで分割して文字の配列として文字1個ごとにspanによりfont-size属性を変化させています。
サンプルテキスト 
<html>
<head>
  <meta charset="utf-8">
</head>
<body>
  <span id="id3">サンプルテキスト</span>
  <script type="text/javascript">
  function test3(){
    var o=document.getElementById('id3');
    var s=o.innerText;
    var c=s.split("");
    var t="";
    for(var n=0;n<c.length;n++){
      t=t+"<span style='font-size:"+(n*2+10)+"px;'>"+c[n]+"</span>";
    }
    o.innerHTML=t;
  }
  </script>
  <form name="test3Form">
    <input type="button" value="色の変更" onclick="test3()" />
  </form>
</body>
</html>

線

style.border
以下のボタンをクリックすると文字の外側に線を引きます。
文字囲み線 
<html>
<head>
  <meta charset="utf-8">
</head>
<body>
  <span id="id4">文字囲み線</span>
  <script type="text/javascript">
  function test4(){
    var o=document.getElementById('id4');
    o.style.border="solid 1px red";
  }
  </script>
  <form name="test4Form">
    <input type="button" value="文字囲み線" onclick="test4()" />
  </form>
</body>
</html>