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" ...
随机推荐
- [HDOJ5573]Binary Tree(找规律,贪心)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5573 这个题……规律暂时还找不到,先贡献两发TLE的代码吧,一个dfs一个状压枚举. #include ...
- Java NIO读书笔记
一.Java IO与NIO区别: (1)Java NIO提供了与标准IO不同的IO工作方式: Channels and Buffers(通道和缓冲区):标准的IO基于字节流和字符流进行操作的,而NIO ...
- 配置Tomcat 中文字符集问题
找到Tomcat安装路径下的conf文件夹下的server.xml配置文件,修改配置Tomcat端口的标签"Connector",添加URIEncoding属性,代码如下: < ...
- file类型允许的文件格式设置问题,“选择文件”打开缓慢
1,file类型的input对于打开的选择框的属性是由以下两个属性控制的: ①multiple="multiple" :一次可以选择多个文件 ②accept="image ...
- hdu 4619 Warm up 2 网络流 最小割
题意:告诉你一些骨牌,然后骨牌的位置与横竖,这样求最多保留多少无覆盖的方格. 这样的话有人用二分匹配,因为两个必定去掉一个,我用的是最小割,因为保证横着和竖着不连通即可. #include <s ...
- 这篇博客的内容基本没见过,mark 一下以后可以学习
初识机器学习算法有哪些? 机器学习无疑是现在数据分析领域的一个重要内容,凡事从事IT工作领域的人都在平时的工作中或多或少的会用到机器学习的算法. 机器学习有很多算法,不过大的方面可分为两类:一个是学习 ...
- 学习macos常用的一些快捷键笔记
学习mac 操作系统使用笔记 Dock功能学习 类似快捷图标一样 Command+q quit a program Dock上添加与删除都用拖动 command+delete 删除文件 shift+c ...
- Heritrix源码分析(十三) Heritrix的控制中心(大脑)CrawlController(二)
本博客属原创文章,欢迎转载!转载请务必注明出处:http://guoyunsky.iteye.com/blog/650744 本博客已迁移到本人独立博客: http://www.yun5u. ...
- nodejs的调试(node-inspector)
我们在接触客户端javascript的时候,调试利器就是firebug ,也是当年为何喜欢用上firefox 浏览器的主要动力,当然,后来 chrome 插件里也出现了firebug的身影..... ...
- Mysql查询优化器
Mysql查询优化器 本文的目的主要是通过告诉大家,查询优化器为我们做了那些工作,我们怎么做,才能使查询优化器对我们的sql进行优化,以及启示我们sql语句怎么写,才能更有效率.那么到底mysql到底 ...