共有 0 条评论

利用JS 下拉框样式改变所有子节点文字字体和颜色 – 小冉的博客

利用JS 下拉框样式改变所有子节点文字字体和颜色

利用下拉框样式改变所有子节点内文字字体和颜色,直接上个完整案例吧

<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
</head>
<body>
  <div>
    <span>Hello ran</span>
    <p class="selected">Hello Again</p>
    <div class="selected">And Again</div>
    <p>And One Last Time</p>
  </div>

<script language=javascript>
function changeColor()   
{   
     
    var select = document.getElementById("selector").value;   
       if(select=="two")   
    {   
        $("div").children("*").css("color", "green"); 
}
else if(select=="one") 
  {   
        $("div").children("*").css("color", "red");
    }   
    else  $("div").children("*").css("color", "blue"); 
}  
 
function changeStyle()   
{ 
var select = document.getElementById("selector2").value;  
 if(select=="two") 
             $("div").children("*").css("fontFamily", "microsoft yahei");
else 
$("div").children("*").css("fontFamily", "tahoma");
       }  
 
</script>  

<script>function fontZoom(size)
{
$("div").children("*").css("color", "green");
}</script>
<form name="form1" style="float: right;">  
    <select name="selector" id="selector" onchange="changeColor()">  
        <option value="one">红色 </option>  
        <option value="two">绿色 </option> 
	<option value="three">蓝色 </option>
    </select> 
<select name="selector2" id="selector2" onchange="changeStyle()">  
        <option value="one">Tahoma</option>  
        <option value="two">微软雅黑 </option>  
    </select>     
    </form>
</body>

挺简单的代码 注释就不加了

  • 用支付宝打我
  • 用微信打我

你可以像猪一样的生活,但你永远不会像猪一样快乐!!!

12条回应:“利用JS 下拉框样式改变所有子节点文字字体和颜色”

  1. 心情去旅行说道:

    这个有点意思哟

  2. 灵商智库说道:

    非常喜欢你的博客风格哈

  3. 歪妖内涵网说道:

    我不是来抢沙发的,也不是来打酱油的。

  4. 最励志官网说道:

    路过,留个脚印,网站很棒!

  5. 很不错的网站,交换友情链接不,爱奇趣网:http://www.iqiqu.net/?

  6. 糗事百科说道:

    路过看一下!

  7. 淑梅说道:

      老公原来开面包车,手动挡、手摇车窗、空调也是坏的,他说有方法假装成高级车:
      起步挂挡的时候先挂一下倒挡,倒车灯会亮一下,让人以为是自动挡;
      摇车窗时尽量匀速,看起来像电动车窗一样;
      大热天紧闭车窗,装出一副凉爽惬意的样子,假装有空调。

  8. Wish商户平台说道:

    新手学习中~感谢分享!

发表评论

电子邮件地址不会被公开。 必填项已用*标注