<!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. Java 数据类型转换

    int iValue = new Integer(strValue).intValue();String str = intObj.toString();int number = Integer.pa ...

  2. python 捕获 shell 脚本的输出结果

    import subprocessoutput =Popen(["mycmd","myarg"], stdout=PIPE).communicate()[0] ...

  3. windows主机无法访问服务器

    在CentOS下安装配置hadoop的时候,总显示因为网络端口而导致主机无法访问服务器,遂打算先关闭一下防火墙. 偶然看到防火墙的配置操作说明,感觉不错.执行”setup”命令启动文字模式配置实用程序 ...

  4. ListItem选中时只改变文字的颜色

     继承父状态,然后使用Selector 如果是用Linearlayout里面动态添加Linearlayout的情况,就要代码控制了 // 就是为了改变颜色.                     l ...

  5. [置顶] Android Provision (Setup Wizard)

    Android中很多框架性的设计都已经存在了,但在市场上的发布版本里却因为没有很好的理解Android的设计意图而进行自己的定制,或者自己又做一 个冗余的实现.Android中的Provision其实 ...

  6. iOS8 LaunchScreen.storyboard

    我目前的需求是需要将启动图片通过LaunchScreen.storyboard  来实现. 我首先想到的是创建一个Sb,使用自动布局来布局imageview,并设置如下图: 布局好之后,在Image里 ...

  7. android 自定义组件-带图片的textView

    1. 定义属性 <?xml version="1.0" encoding="utf-8"?> <resources> <decla ...

  8. Scala List

    1 介绍 Scala中列表List类似于数组,List所有元素都具有相同的类型,但有两个重要的区别. 首先,列表是不可变的,这意味着一个列表的元素可以不被分配来改变. 第二,列表表示一个链表,而数组平 ...

  9. [转载] 老版本ubuntu 更新源

    untu的普通版本支持的时间都有限,过了支持的时间,更新源都会被停用,比如ubuntu9.10原来的源都失效了(包括官方源,类似ustc的第 三方源,因为这些第三方源也是和官方源同步的).因此,直接用 ...

  10. Android AIDL SERVICE 双向通信 详解

    http://www.cnblogs.com/punkisnotdead/p/5062631.html 起因 是这个blog 提到了 用webview 的时候 用开启子进程的方式 可以极大避免内存泄露 ...