用JavaScript改变字体CSS样式

<
html
>


<
head
>


<
meta 
http-equiv
="Content-Type"
 content
="text/html; charset=UTF-8"
>


<
title
>
CSS font
</
title
>


<
style 
type
="text/css"
>
...

<!--
#Sample{...}{border:1px solid #000; margin:5px; padding:3px; width:300px;}
.s1{...}{color:#990033;}
.s2{...}{font-family:Georgia;}
.s3{...}{font-size:20px;}
/**//* font-size-adjust:设置字体名称序列是否强制使用同一尺寸*/
.s4{...}{font-family:verdana,courier; font-size-adjust:.56; font-size:20px;}
/**//*font-stretch:设置文字是否横向的拉伸变形，wider:使用比当前设置的值导致字体宽度更大的值*/
.s5{...}{font-stretch:wider; font-size:20px;}
.s6{...}{font-style:italic;}
.s7{...}{font-weight:bold;}
.s8{...}{text-decoration:blink;}
/**//*text-underline-position:设置下划线的位置，above：再文本上面*/
.s9{...}{text-underline-position:above; text-decoration:underline;}
/**//*font-variant:设置文本是否为小型的大写字母*/
.s10{...}{font-variant:small-caps;}
.s11{...}{text-transform:uppercase;}/**//*设置文本的大小写*/
.s12{...}{line-height:36px;}/**//*设置行高*/
.s13{...}{letter-spacing:8px;}/**//*设置文字间距*/
.s14{...}{word-spacing:8px;}/**//*设置对象中的单词之间的间距*/
-->

</
style
>


</
head
>


<
body
>


<
div 
id
="Sample"
>

this is a text for test.文字字体
<
br
>


</
div
>


<
script 
language
="javascript"
>
...

<!--
function changeClass()
...{
    var class_name = document.getElementById("Stylelist").value;
    document.getElementById("Sample").className = class_name;
}
-->

</
script
>

CSS:
<
select 
id
="Stylelist"
>


<
option 
value
="s1"
>
s1
</
option
>


<
option 
value
="s2"
>
s2
</
option
>


<
option 
value
="s3"
>
s3
</
option
>


<
option 
value
="s4"
>
s4
</
option
>


<
option 
value
="s5"
>
s5
</
option
>


<
option 
value
="s6"
>
s6
</
option
>


<
option 
value
="s7"
>
s7
</
option
>


<
option 
value
="s8"
>
s8
</
option
>


<
option 
value
="s9"
>
s9
</
option
>


<
option 
value
="s10"
>
s10
</
option
>


<
option 
value
="s11"
>
s11
</
option
>


<
option 
value
="s12"
>
s12
</
option
>


<
option 
value
="s13"
>
s13
</
option
>


<
option 
value
="s14"
>
s14
</
option
>


</
select
>


<
input 
type
="button"
 value
="change Css"
 onClick
="changeClass();"
>


</
body
>


</
html
>