<!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. [HDOJ2639]Bone Collector II（第k优01背包）

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2639 题意:求01背包的第k优解 dp(i, j)表示容量为j时的i优解 对于第二维的操作和01背包几 ...

  2. hdu3270Arranging Your Team(dfs)

    http://acm.hdu.edu.cn/showproblem.php?pid=3720 #include <iostream> #include<cstdio> #inc ...

  3. 极限编程，最强N皇后JAVA解题代码，4秒出15皇后，33秒出16皇后

    私人博客原文链接来自:http://www.hexcode.cn/article/show/eight-queen 8皇后以及N皇后算法探究,回溯算法的JAVA实现,非递归,循环控制及其优化 8皇后以 ...

  4. 【笨嘴拙舌WINDOWS】GDI映射方式

    TextOut(hdc,100,100,TEXT(“Love China”),10) 这句GDI函数的作用是在坐标点(100,100)的位置输出一个“Love China”字符串: GDI函数作为硬件 ...

  5. Eclipse附加项目中的某个jar包的源码

    1.这里以web项目为例,打开项目应用的jar包:如下图 2.在想要引入源码的jar包上右键>属性(Properties)

  6. CodeForces Round #298 Div.2

    A. Exam 果然,并没有3分钟秒掉水题的能力,=_=|| n <= 4的时候特判.n >= 5的时候将奇数和偶数分开输出即可保证相邻的两数不处在相邻的位置. #include < ...

  7. hdu4618 Palindrome Sub-Array dp+记忆化搜索 或者直接暴力

    题意就是找一个 左右上下对称的正方形矩阵. 连接:http://acm.hdu.edu.cn/showproblem.php?pid=4618 没想到记忆+dp和暴力就能水过... //记忆话搜索+d ...

  8. svn备份脚 本

    一直用这套脚本备份,脚本主体虽不是原创,但是从网上得到后因为不能运行也进行了些修改,前两天看到有人问关于SVN备份的问题,今天又把脚本整理了一下,解决了不能循环备份多个配置库的问题.希望对大家有所帮助 ...

  9. ecshop 文章列表页调用描述信息啊

    1.打开 includes/lib_article.php文件 将 $sql = 'SELECT article_id, title, author, add_time, file_url, open ...

  10. 使用 Linux 终端 SSH 登录 VPS

    Windows 中远程 SSH 登录 VPS 进行管理的利器是 PuTTY,但是 Linux 中就没必要用它了.Linux.Unix(包括 Mac iOS)都必然有内置的命令行终端,内建了 OpenS ...