dom select选单
<!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选单的更多相关文章
- 浏览器端-W3School-HTML:HTML DOM Select 对象
ylbtech-浏览器端-W3School-HTML:HTML DOM Select 对象 1.返回顶部 1. HTML DOM Select 对象 Select 对象 Select 对象代表 HTM ...
- HTML DOM select() 方法
定义和用法 select() 方法用于选择该元素中的文本. 语法 textareaObject.select() 实例 下面的例子可选择文本框中的文本: <html> <head&g ...
- HTML DOM Select 对象
Select 对象 Select 对象代表 HTML 表单中的一个下拉列表. 在 HTML 表单中,<select> 标签每出现一次,一个 Select 对象就会被创建. 您可通过遍历表单 ...
- 当select框变化时 获取select框中被选中的值
DOM <select name="course"> <option value="1">1</option> <op ...
- 【AngularJs】---实现select的ng-options
controller .controller('MainController', function($scope, $http, $ionicModal, $timeout) { var post = ...
- JS & DOM 对象
22:36 2013/6/4 详情参照W3C文档标准 Browser 对象(顶层对象) DOM Window DOM Navigator DOM Screen DOM History DOM Loca ...
- javascript DOM对象转jquery对象
首先,假设一种情形:要在HTML文件中为一个select对象添加一个函数,这个函数的名字叫dynamic_change(this),当select的option被改变的时候调用onchange事件来处 ...
- [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 ...
- 可以添加自定义的Select控件
1.控件dom <select name="WebSiteTarget" id="WebSiteTarget" class="w1" ...
随机推荐
- BZOJ 2752 高速公路(road)(线段树)
题目链接:http://61.187.179.132/JudgeOnline/problem.php?id=2752 题意:给出一个数列A,维护两种操作: (1)将区间[L,R]之内的所有数字增加de ...
- BZOJ 1502 月下柠檬树(simpson积分)
题目链接:http://61.187.179.132/JudgeOnline/problem.php?id=1502 题意:给出如下一棵分层的树,给出每层的高度和每个面的半径.光线是平行的,与地面夹角 ...
- Server-Side UI Automation Provider - WinForm Sample
Server-Side UI Automation Provider - WinForm Sample 2014-09-14 源代码 目录 引用程序集提供程序接口公开服务器端 UI 自动化提供程序从 ...
- bzoj2119
题意就是差分后求形如ABA的串的个数,B的长度为M 这是2011国家集训队互测的试题,是道好题,我直接给出出题人的题解吧: 对于这种在线性序列上的组合计数问题,我们很容易想到一个工具:分治!分治算法在 ...
- Android中使用ListView实现分页刷新(线程休眠模拟)(滑动加载列表)
当要显示的数据过多时,为了更好的提升用户感知,在很多APP中都会使用分页刷新显示,比如浏览新闻,向下滑动到当前ListView的最后一条信息(item)时,会提示刷新加载,然后加载更新后的内容.此过程 ...
- 51nod1175 区间中第K大的数
裸的主席树. #include<cstdio> #include<cstring> #include<cctype> #include<algorithm&g ...
- iPad中控制器view的width和height
一.iPad中控制器view的width和height 1> 规律 * width 是宽高中最小的那个值 * height 是宽高中最大的那个值 2> 举例(比如窗口根控制器的view,有 ...
- 【英语】Bingo口语笔记(80) - 记忆、忘记的表达
- UVa 11384 Help is needed for Dexter 正整数序列
给定一个正整数 n ,你的任务使用最少的操作次数把序列 1, 2, 3, -- , n 中的所有数都变成 0 .每次操作可以从序列中选择一个或者多个数,同时减去一个相同的正整数.比如,1, 2, 3 ...
- 【转】在Source Insight中看Python代码
原文网址:http://www.cnblogs.com/xuxm2007/archive/2010/09/02/1815695.html SI是个很强大的代码查看修改工具,以前用来看C,C++都是相当 ...