下拉菜单设置字体的大小
我想问一下,在下拉菜单下面怎样可以设置显示字体的大小,就是点下拉框的时候里面的字会按相应的字号显示的,(例如:QQ空间留言板上面的,点击字体大小,下拉框就会很直观的显示字号的大小。)
请问这是怎么实现的啊,我是用的Dreamweaver做的网页,需要什么代码才可以实现啊?
[解决办法]
JS : select option
[解决办法]
把需要改变的字体内容放到一个层里,然后用JS实现。
[解决办法]
<style>
div.fontsize{
width:100px;
border:1px solid #CCC;
border-left-width:5px;
background-color:#FFF;
padding:3px;
display:none;
position:absolute;
}
div.fontsize a{
display:block;
width:100px;
height:20px;
color:#666;
text-decoration:none;
}
div.fontsize a:hover{
display:block;
width:100px;
height:20px;
background-color:#003366;
color:#FFF;
text-decoration:none;
}
span.menu{
display:block;
width:80px;
height:20px;line-height:20px;
border:1px solid #CCC;
font-size:12px;
text-align:center;
cursor:pointer;
}
</style>
<span id="menu" class="menu" onClick="setfontsize();">字体大小</span>
<script>
function setfontsize(){
var f = document.getElementById("fontsize");
var m = document.getElementById("menu");
f.style.display="block";
f.left = m.left
f.top = m.top + m.style.height;
}
</script>
<div id="fontsize" class="fontsize" onMouseUp="this.style.display='none'">
<a href="JavaScript:void(0);" style="font-size:12px;">12px</a>
<a href="JavaScript:void(0);" style="font-size:14px;">14px</a>
<a href="JavaScript:void(0);" style="font-size:16px;">16px</a>
<a href="JavaScript:void(0);" style="font-size:18px;">18px</a>
<a href="JavaScript:void(0);" style="font-size:24px;">24px</a>
</div>
基本就是以上的样子
[解决办法]
简单写了个
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><script type="text/javascript"> function cc(_this) { document.getElementById(_this).style.display =""; } function dd(_this) { document.getElementById(_this).style.display ="none"; }</script><title>无标题文档</title></head><body><span onmouseover="cc('gg')" style="cursor:pointer;" onclick="dd('gg')">>X<</span><div id="gg" style=" display:none" ><div style="font-size:36px;">中国</div><div style="font-size:34px;">中国</div><div style="font-size:31px;">中国</div><div style="font-size:30px;">中国</div><div style="font-size:22px;">中国</div></div></body>