DOM事件使用

最新推荐文章于 2024-07-12 16:27:40 发布

java2database

最新推荐文章于 2024-07-12 16:27:40 发布

阅读量68

点赞数

分类专栏： js xhtml dom 文章标签： xhtml javascript ViewUI

本文链接：https://blog.csdn.net/java2database/article/details/84082803

版权

js xhtml dom 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

练习2：使用js 练习DOM处理事件

源代码：

效果图见附件：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>无标题页</title>
<style type="text/css">
ul
{
list-style:none;
}
#Select1
{
border-bottom-style:solid;
border:solid 1px black;
position:absolute;
width:200px;
height:300px;
top:10px;
left:200px;
}

#Select2
{
border-bottom-style:solid;
border:solid 1px black;
position:absolute;
top:10px;
right:300px;
width:200px;
height:300px;
}
#center
{
position:absolute;
right:500px;
left:400px;
}

.style3
{
left: 400px;
top: 15px;
height: 290px;
right: 564px;
}

.style4
{
width: 194px;
right: 300px;
top: 10px;
left: 750px;
height: 296px;
}

.style5
{
width: 194px;
left: 200px;
top: 10px;
}

.style6
{
width: 44px;
}

</style>

</head>
<body>

<select id="Select1" class="style5" size="18" multiple="multiple">
<option selected="selected">选项1</option>
<option>选项2</option>
<option>选项3</option>
<option>选项4</option>
<option>选项5</option>
<option>选项6</option>
</select>

<div id="center" class="style3" >
<ul>
<li><input id="Button1" type="button" value="-->" class="style6" οnclick="return Button1_onclick()" /></li>
<li><input id="Button2" type="button" value="==>" class="style6" οnclick="return Button2_onclick()" /></li>
<li><input id="Button3" type="button" value="<--" class="style6" οnclick="return Button3_onclick()" /></li>
<li><input id="Button4" type="button" value="<==" class="style6" οnclick="return Button4_onclick()" /></li>
</ul>
</div>

<select id="Select2" class="style4" size="18" multiple="multiple">

</select>
<script language="javascript" type="text/javascript">
document.getElementById("Button1").onclick = Button1_onclick;
var selects = document.getElementById("Select1");
var otherSelect = document.getElementById("Select2");
var elements = selects.length;
function Button1_onclick() {
for(var i =0 ; i<elements ; i++ ){
if(selects.options[i].selected){
var option = new Option(selects.options[i].innerHTML ,i+1);
otherSelect.options[otherSelect.length] = option;
selects.removeChild(selects.options[i]);
}
}//for
}

</script>
</body>
</html>

java2database

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
DOM事件使用

练习2：使用js 练习DOM处理事件源代码：效果图见附件：&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;&lt;html xmlns="http://www.w3.org/1999...
复制链接

扫一扫