<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>无标题文档</title>

<style>

body { margin: 0; padding: 0; }

ul { padding: 0; margin: 0; }

li { list-style: none; }

a { text-decoration: none; color: #000; display: block; }

#div1 { width: 250px; height: 20px; border: 1px solid #fe6601; padding: 5px; line-height:20px; margin: 20px auto 0 auto;}

#ul1 { margin: 0 auto; width: 260px; line-height: 20px; border: 1px solid #fe6601; display: none;}

#ul1 li a { padding: 5px; }

#ul1 li a:hover { background: #fe6601; color: #fff; }

</style>

<script type="text/javascript">

window.onload = function ()

{

    var odiv = document.getElementById('div1');

    var oul = document.getElementById('ul1');

    var arr = [];

    odiv.onclick = function (ev)

    {

        var ev = ev || event;

        oul.style.display = 'block';

        ev.cancelBubble = true;

    }

    for(var i = 0; i < oul.children.length; i++ )

    {

        oul.children[i].onclick = function ()

        {

            for(var i = 0; i < oul.children.length; i++ )

            {

                oul.children[i].children[0].style.background = '';

                oul.children[i].children[0].style.color = '';

            }

            odiv.innerHTML = this.children[0].innerHTML;

            this.children[0].style.background = '#fe6601';

            this.children[0].style.color = '#fff';

        }

    }

    document.onclick = function ()

    {

        oul.style.display = 'none';

        arr = [];

    }

};

</script>

</head>

<body>

    <div id="div1"></div>

    <ul id="ul1">

        <li><a href="javascript:;">宋体</a></li>

        <li><a href="javascript:;">黑体</a></li>

        <li><a href="javascript:;">楷体</a></li>

        <li><a href="javascript:;">微软雅黑</a></li>

        <li><a href="javascript:;">新宋体</a></li>

        <li><a href="javascript:;">仿宋</a></li>

    </ul>

</body>

</html>

dom select选单的更多相关文章

  1. 浏览器端-W3School-HTML：HTML DOM Select 对象

    ylbtech-浏览器端-W3School-HTML:HTML DOM Select 对象 1.返回顶部 1. HTML DOM Select 对象 Select 对象 Select 对象代表 HTM ...

  2. HTML DOM select() 方法

    定义和用法 select() 方法用于选择该元素中的文本. 语法 textareaObject.select() 实例 下面的例子可选择文本框中的文本: <html> <head&g ...

  3. HTML DOM Select 对象

    Select 对象 Select 对象代表 HTML 表单中的一个下拉列表. 在 HTML 表单中,<select> 标签每出现一次,一个 Select 对象就会被创建. 您可通过遍历表单 ...

  4. 当select框变化时 获取select框中被选中的值

    DOM <select name="course"> <option value="1">1</option> <op ...

  5. 【AngularJs】---实现select的ng-options

    controller .controller('MainController', function($scope, $http, $ionicModal, $timeout) { var post = ...

  6. JS & DOM 对象

    22:36 2013/6/4 详情参照W3C文档标准 Browser 对象(顶层对象) DOM Window DOM Navigator DOM Screen DOM History DOM Loca ...

  7. javascript DOM对象转jquery对象

    首先,假设一种情形:要在HTML文件中为一个select对象添加一个函数,这个函数的名字叫dynamic_change(this),当select的option被改变的时候调用onchange事件来处 ...

  8. [Cycle.js] From toy DOM Driver to real DOM Driver

    This lessons shows how we are able to easily swap our toy DOM Driver with the actual Cycle.js DOM Dr ...

  9. 可以添加自定义的Select控件

    1.控件dom <select name="WebSiteTarget" id="WebSiteTarget" class="w1" ...

随机推荐

  1. leetcode：Happy Number

    要求:Write an algorithm to determine if a number is "happy". A happy number is a number defi ...

  2. aptana studio 3支持jquery

    首先要说的一点是,如果你不使用PortableGit,就不要安装,否则New From Template中会缺失大部分模板．至于还有什么缺陷,暂时没测出来,本人也是刚玩aptana studio 3哈 ...

  3. 使用JAVA直观感受快速排序与冒泡排序的性能差异

    初学算法,肯定会编写排序算法 其中两个最为有名的就是冒泡排序和快速排序 理论上冒泡排序的时间复杂度为O(N^2),快速排序的时间复杂度为O(NlogN) 下面本门使用JAVA,分别编写三段排序程序 对 ...

  4. HTTP使用BASIC认证的原理及实现方法

    一．   BASIC认证概述 在HTTP协议进行通信的过程中,HTTP协议定义了基本认证过程以允许HTTP服务器对WEB浏览器进行用户身份证的方法,当一个客户端向HTTP服务器进行数据请求时,如果客户 ...

  5. hdu 4619 Warm up 2 网络流 最小割

    题意:告诉你一些骨牌,然后骨牌的位置与横竖,这样求最多保留多少无覆盖的方格. 这样的话有人用二分匹配,因为两个必定去掉一个,我用的是最小割,因为保证横着和竖着不连通即可. #include <s ...

  6. Eclipse使用代码清理功能（Clean Up）

    本文转载自http://www.ibm.com/developerworks/cn/opensource/os-eclipse-clean/ 但是为了适应自己使用,还是自己总结了一下. 一．概述 代码 ...

  7. 《摇滚南京》——"人生下来就是孤独"

    昨天是纪录片<摇滚南京>东南大学站的展映分享会 我不是一个摇滚迷,作为学渣狗看论文.码代码的时候会塞个耳机,平时其实民谣听得更多一点,摇滚觉得有点高大上.所以整好趁着学校有活动,也跟着高大 ...

  8. RAC 之 RMAN 备份

    这篇主要介绍的是RAC 环境下的RMAN 备份. 关于Oracle 备份与恢复的一些理论知识参考我的Blog:       Oracle 备份 与 恢复 概述 http://blog.csdn.net ...

  9. 史上最完整的Android开发工具集合

    路径: http://www.apkbus.com/thread-252748-1-1.html

  10. ASIFormDataRequest 登录

    ASIFormDataRequest *request = [ASIFormDataRequest requestWithURL: [NSURL URLWithString: @"http: ...