下拉菜单设置字体的大小解决方案
日期：2014-05-17 浏览次数：20851 次
下拉菜单设置字体的大小
我想问一下，在下拉菜单下面怎样可以设置显示字体的大小，就是点下拉框的时候里面的字会按相应的字号显示的，（例如：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>
基本就是以上的样子
------解决方案--------------------
简单写了个
我想问一下，在下拉菜单下面怎样可以设置显示字体的大小，就是点下拉框的时候里面的字会按相应的字号显示的，（例如：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>
基本就是以上的样子
------解决方案--------------------
简单写了个
- HTML code
<!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>
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
