font-size: フォントサイズの指定

test5

JavaScriptでコントロールしてみる
サブウィンドウへの出力文字をfont-size指定変更で拡大縮小する。

クリックするとサブウィンドウが開いてxx ptという文字が表示されます。xxはJavaScript側で設定したピクセル数(初期値50)です。+10pxボタンをクリックすると10ポイントずつ大きくなり、-10pxボタンで小さくなります。
0px以下は変化がありません。

<SCRIPT LANGUAGE="javaScript"> var pxSize=50; //ピクセル初期値 //スクリプトを整理するために、サブウィンドウHTMLへの出力内容の //頭の部分を変数htmlOutput0に、終わりの部分を変数htmlOutput1に入れておく var htmlOutput0 ='<HTML>'; htmlOutput0+='<HEAD>'; htmlOutput0+='<META HTTP-EQUIV="Content-Type" '; htmlOutput0+='CONTENT="text/html;CHARSET=x-sjis">'; htmlOutput0+='<TITLE>test5_Window</TITLE>'; htmlOutput0+='</HEAD>'; htmlOutput0+='<BODY BGCOLOR="#ffffff">'; htmlOutput0+='<CENTER><P>'; var htmlOutput1 ='<BR>'; htmlOutput1+='</CENTER>'; htmlOutput1+='</BODY>'; htmlOutput1+='</HTML>'; function test(sw){ if(sw=='a10')pxSize+=10 ;//10ピクセルずつ拡大 if(sw=='m10')pxSize-=10;//10ピクセルずつ縮小 //サブウィンドウオープン stylWin = window.open('','stylWin','toolbar=0,loction=0,directories=0,status=0,menubar=0,scrollbars=1,resizable=1,width=300,height=150') stylWin.document.clear() stylWin.document.write(htmlOutput0) stylWin.document.write('<STYLE TYPE="text/css">');//スタイル定義 stylWin.document.write('H3{font-size:'+pxSize+'px}') stylWin.document.write('</STYLE>') stylWin.document.write('<H3>'+pxSize+'pt</H3><BR>');//定義されたH3タグを表示する stylWin.document.write(htmlOutput1) stylWin.document.close() } </SCRIPT> <FORM> <INPUT TYPE="button" VALUE=" +10px " onClick="test('a10')"> <INPUT TYPE="button" VALUE=" -10px " onClick="test('m10')"> </FORM>
Maintained by
tato@fureai.or.jp works1997 Toshirou Takahashi