リンクや文字を設定してみる

2015年10月29日

HTMLには、書体、色、文字、リンクの設定を行うタグが用意されています。Stringオブジェクトには、上記の設定を行うためのメソッドがあります。それらのメソッドを使用することで、プログラムで文字の大きさや色などを設定できます。

例を挙げると、linkメソッドはリンクを設定するメソッドです。HTMLでは、<a href="リンク先"></a>です。

今回は、Stringオブジェクトに用意されているHTML関連のメソッドの使用例として、fontsizeメソッドと、linkメソッドを見ていきます。

サンプルコードの実行結果はこちら

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>文字とリンクを設定してみる</title>
   
</head>
<body>
    
<script>
    var str1 = "文字やリンクを設定する";
    for( var i=1; i<= 7 ; i++){
        document.write("<p>",str1.fontsize(i) ,"</p>");
    }

    var url = "http://google.co.jp";
    var text = "Google".link(url) + "で検索する";
    document.write("<h2>",text,"</h2>");

</script>
</body>
</html>

<!doctype html>

<html>

<head>

<title>文字とリンクを設定してみる</title>

</head>

<body>

var str1 = "文字やリンクを設定する";

for( var i=1; i<= 7 ; i++){

document.write("<p>",str1.fontsize(i) ,"</p>");

}

var url = "http://google.co.jp";

var text = "Google".link(url) + "で検索する";

document.write("<h2>",text,"</h2>");

</script>

</body>

</html>

linkメソッド

linkは、ハイパーリンクを設定するメソッドです。サンプルコードのように、linkメソッドは文字列の一部に設定できます。

Stringオブジェクトには、今回書いた以外に、文字に関するHTMLを設定するメソッドが用意されています。フォントの色を設定するfontcolorメソッドや、書体をボールド体にするboldメソッドです。それらのメソッドはどれもStringオブジェクトのインスタンスに実行して、Stringオブジェクトのインスタンスを返します。なので、メソッドはピリオド「.」で連結して実行できます。たとえば、色を設定するfontcolorメソッドとフォントサイズを設定するfontsizeメソッドを連続して実行するには以下のように書きます。
例；
　testStr = str.fontcolor("red").fontsize(3);