html怎样让列表向下移动,Html无序列表ul控件实现行上下移动.
// 创建一个ul
var ul = document.createElement("ul");
ul.id = "oList";
// 创建div
var div = document.getElementById('mergeCase');
// 把ul放置到div中
div.appendChild(ul);
// 遍历所有的li条目
function trace()
{
var strTest = "";
for (var i = 0; i < ul.childNodes.length; i ++)
{
strTest += ul.childNodes[i].childNodes[1].innerText;
}
alert(strTest);
}
// 当用户点击某一个li的时候,做一下标记,记住选中
function select(li)
{
// 先清除所有li的选中状态
for (var i = 0; i < ul.childNodes.length; i ++)
{
ul.childNodes[i].style.listStyleType="none";
}
// 设置用户点击li的选中状态
li.style.listStyleType="circle";
}
function createItem(txt1, txt2)
{
// 创建一个li
var li = document.createElement("li");
// 创建2个span,用于放置text
var inputname = document.createElement("span");
var inputresolution = document.createElement("span");
// 设置text
inputname.innerText = "(-) " + txt1;
inputresolution.innerText = txt2;
// 设置li的style属性
li.style.listStyleType="none";
// 添加span控件到li
li.appendChild(inputname);
li.appendChild(inputresolution);
// 注册li的onclick事件
li.onclick = function ()
{
select(this);
}
// li已经装配完毕,返回给ul,用于添加
return li;
}
// 创建指定数量的li
function mergeCase(count){
for( var i = 0; i
var li = createItem("VideoName:" + (Math.round(Math.random()*1000)) + " "
, "VideoId:" + (i) + "");
ul.appendChild(li);
}
}
// 向上移动
function downSwap(){
var s = document.getElementById("oList");
var w = s.childNodes.length;
for (var i = 0;i < w; i++ ){
if (s.children(i).style.listStyleType == "circle" && s.children(i).nextSibling != null)
{
// Ie下面有效的api,ff和chrome不确定是否支持
s.children(i).swapNode(s.children(i).nextSibling);
return ;
}
}
}
// 向下移动
function upSwap(){
var s = document.getElementById("oList");
var w = s.childNodes.length;
for (var i = 0;i < w; i++ ){
if (s.children(i).style.listStyleType == "circle" && s.children(i).previousSibling != null)
{
s.children(i).swapNode(s.children(i).previousSibling);
return ;
}
}
}
// 删除一个li条目
function del(){
var s = document.getElementById('oList');
var w = s.childNodes.length;
for (var i = 0;i < w; i++ ){
if (s.children(i).style.listStyleType == "circle")
{
s.removeChild(s.childNodes[i]);
return ;
}
}
}
html怎样让列表向下移动,Html无序列表ul控件实现行上下移动.相关推荐
- 有序列表ol与无序列表ul用法
有序列表<ol>与无序列表ul用法 其中<li> 标签定义列表项目,<li> 标签可用在有序列表 (<ol>) 和无序列表 (<ul>) 中 ...
- 怎么改变html无序列表的字号,html无序列表代码 html5 无序列表的行距怎么设置
html语句怎么实现无序列表并排?就是两列怎么实现 无序列表并排111 无序列表并排222 css: - #list li{float:left;} float浮动就行了,最好给ol和li设定固定宽度 ...
- python随机生成无序列表_python实现无序列表:链表
介绍链表前我们先了解下什么是列表. 在对基本数据结构的讨论中,我们使用 Python 列表来实现所呈现的抽象数据类型.列表是一个强大但简单的收集机制,为程序员提供了各种各样的操作.然而,不是所有的编程 ...
- html列表黑色圆点是有序还是,网页HTML有序列表ol和无序列表ul
html语言中有序列表和无序列表有什么区别? 第一,有序列表的标签是 ,有start属性 ,最大序号为999 无序列表的标签是,无start属性 第二,的显示方式是列表前面有序号(序号形式由type属 ...
- html怎么去掉无序列表符号,html无序列表怎么写?无序列表怎么去掉点?(图文)...
在网页中,可以用很多方法来排列文本项目,可以将多种项目没有顺序地排列在一起,也可以给每个项目赋予编号后再进行排列.此时,没有顺序的文本排列方式称为无序列表. 无序列表是项目列表,列表内容可以按任意顺序 ...
- 表格标签(合并单元格,列表结构标签thead, tbody,有序列表ol,无序列表dl )
表格用法: < table >< /table >是用于表格的标签. < tr >< /tr>标签用于定义表格中的行,必须嵌套在< table & ...
- 有序列表标签与无序列表标签
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...
- 【HTML5】html5中列表、表格、表单控件、浮动框架及结构化标签知识详解大全
一.列表 1.有序列表 <ol>有序列表 order list <li>列表项</li> <li>列表项</li> </ol> ...
- html 无序列表黑点,Html无序列表,子弹点问题
6 个答案: 答案 0 :(得分:1) 您需要以下内容: 然后只需添加padding:0的 .right-block ul li { list-style: none; background: url ...
最新文章
- Debian/Ubuntu/Raspbian 时间同步
- 理解一个类里边设置两个同名函数
- php生日计算年龄,php根据生日计算年龄的方法
- 恐龙快跑小程序对接流量主源码+前端 v5.0.4 全开源微擎框架
- python怎么执行代码漏洞_如何使用python查找网站漏洞
- 让软件自己写软件,机器编程未来会取代程序员吗?
- 《从问题到程序:用Python学编程和计算》——2.4 字符串
- HALCON 控制变量没有被初始化_OA大典故障案例摘录【第1397篇】理光2501如何载体初始化 ?...
- 如何使用NFC读写器读卡器ACR122U-A9|ACR1251U-M1|ACR1252U读写NDEF格式的智能海报|网址|文本等数据的方法与步骤
- MQTT、CoAP 还是 LwM2M?主流物联网协议如何选择
- Appium自动化测试基础--补充:C/S架构和B/S架构说明
- 基于ADS自带二极管的400Mhz倍频器设计
- 买iPhone担心买到翻新机?教你一招,轻松鉴别各个版本
- 华科图书情报专硕考研复试与读研
- 十四、Nginx--rewrite规则
- 【算法-枚举】淘气的青蛙 自己对解题思路的梳理
- XLA IR:HLO、LHLO、MHLO和LMHLO
- HYNB Contest 7:2017 Asia HCMC Vietnam National Programming Contest
- cortex-M3/cortex-M4架构
- 拉格朗日乘数法 对y的偏导数的推导 (有点牵强,作为理解吧)
热门文章
- C/C++ 指针详解
- 关于python语言和人工智能下哪个说法不正确_“在资源管理器”窗口中,文件夹图标左侧有“...
- 插入空行_如何一键插入表格空行,这个方法才最高级!
- python快递费用计算_[Python]简单用Python写个查询快递的程序最后附源代码
- kali 切换root权限_Ubuntu 被曝严重漏洞:切换系统语言 + 输入几行命令,就能获取 root 权限...
- FTP命令:下载,上传FTP服务器中的文件
- sed教程入门与实例练习(二)
- Ubuntu主题更换
- 计数排序与桶排序python实现
- Spring文件上传