如何动态给div中选中的某段文字设置字型（如黑体、斜体之类）

<html>
<head>
<div align=center>
<div unselectable="on" align=center  style="height:300; width:400; background-color:powderblue; border:outset powderblue">  
  <br>  
  <div id=foo contenteditable align=left style="height:250; width:350;background-color:white; font-face:Arial; padding:3;  border:inset powderblue; scrollbar-base-color:powderblue; overflow=auto;"></div>  
  <br>  
  <button unselectable="On" onclick='document.execCommand("Bold");foo.focus();' style="width:80; background-color:powderblue; border-color:powderblue">   
   <B>粗体</B></button>  
  <button unselectable="On" onclick='document.execCommand("Italic");foo.focus();'style="width:80; background-color:powderblue; border-color:powderblue">   
   <B><I>斜体</I></B></button>  
  <button unselectable="On" onclick='document.execCommand("Underline");foo.focus();'style="width:80; background-color:powderblue; border-color:powderblue;">   
   <B><U>下划线</U></B></button>
</div>
</div>
</body>
</html>