JS里DOM的实际操作
Posted 左剃头
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JS里DOM的实际操作相关的知识，希望对你有一定的参考价值。
1.要出现的效果：不点击是绿色，移上就会变红色，点击就会变成红色，而且移上其他的框理也不变红色。移出还是绿色
<style type="text/css">
#wai{
width:50px;
height:60px;}
.li{
width:50px;
height:30px;
background-color:#0F0;
border:1px solid #F00;}
</style>
<body>
<div id="wai">
<div class="li" onclick="Dian(this)" onmouseover="Yi(this)" onmouseout="Zou()">日本</div>
<div class="li" onclick="Dian(this)" onmouseover="Yi(this)" onmouseout="Zou()">韩国</div>
</div>
<script type="text/javascript">
function Dian(a)
{
/*要出现的效果：不点击是绿色，移上就会变红色，点击就会变成红色，而且移上其他的框理也不变红色。移出还是绿色*/
var li = document.getElementsByClassName("li");
for( var i=0;i<li.length;i++)
{
li[i].removeAttribute ("bs") ; /* 清除他的属性的目的是让其点击的时候，这个属性在此函数中不起任何的作用*/
li[i].style.backgroundColor = "#0F0";
}
a.setAttribute ("bs",1); /*bs想表示的是有没有选中 */
a.style.backgroundColor = "red";
}
function Yi(b)
{
var li = document.getElementsByClassName("li");
for( var i=0;i<li.length;i++)
{
if(li[i].getAttribute("bs")!= "1" ) /*已经点击一个框时，又移到别的框时，移上的时候给个判断，先获得bs这个属性，这个框依旧是绿色的。
*/
{
li[i].style.backgroundColor = "#0F0";
}
}
b.style.backgroundColor = "red";
}
function Zou()
{
var li = document.getElementsByClassName("li");
for( var i=0;i<li.length;i++)
{
if(li[i].getAttribute("bs")!= "1" ) /*如果不进行点击的话，移出时就恢复为以前的绿色，*/
{
li[i].style.backgroundColor = "#0F0";
}
}
}
</script>
效果的图：
总结：这个题里面涉及到的问题是，为何添加这个属性，如果单用点击事件和放上的话，放上时，确实都会变成红色，但是如果选中
一个，再放上其他的也会变红，想实现的效果是：不点击是绿色，移上就会变红色，点击就会变成红色，而且移上其他的框理也不变红色。移出还是绿色。不进行点击，就只执行放上和移出，点击了之后，屏蔽了移上和移出的功能，移出整个框
时点击的还是红色。
2.出现如下图中的效果：
<style type="text/css">
#wai{
width:500px;
height:200px;}
#zuo{
width:200px;
height:200px;
float:left;
}
#zhong{
width:100px;
height:200px;
float:left;}
#right{
width:200px;
height:200px;
float:left;}
</style>
<body>
<div id="wai">
<div id="zuo">
<select id="k" multiple="multiple" style="width:200px; height:100px;" >
<option value="四川">四川</option> <!--里面有value值-->
<option value="北京">北京</option>
</select>
</div>
<div id="zhong">
<div style="margin-top:15px; margin-left:20px;">
<input type="button" value="全" onclick="All()"/>
</div>
<div style="margin-top:15px; margin-left:20px;">
<input type="button" value="单" onclick="Dan()" />
</div>
</div>
<div id="right">
<select id="ka" multiple="multiple" style="width:200px; height:100px;">
</select>
</div>
</div>
</body>
<script type="text/javascript">
function Dan()
{
var k = document.getElementById("k");
var ka = document.getElementById("ka");
var zhi = k.value; /*取出左边列表的值，相当于取出里面的文字不用再添加点击事件了*/
var str;
str = "<option value=\'"+zhi+"\'>"+zhi+"</option>"; /* 注意拼接，最外面有双引号时，里面就变成了单引号，输出某一参数的值：输出的值是"+a+"*/
var bs = 0; /*设置此变量的作用是，如果我左边的四川，北京都单击进去右边的框，再点击的话会又会重复进去右边的框。这个就是判断右面的文字有没有跟左面的文字有重复的。*/
for( var i=0;i<ka.childNodes.length;i++) childNodes.length 代表的是子元素的长度，连空格的样式都算进去了，相当于是把整个的左边的样式给拿了出来。
{
if(ka.childNodes.item(i).text==zhi)
{
bs=1; 有重复的文字出现；
}
}
if( bs==0)
{
ka.innerhtml = ka.innerHTML + str; /*相当于累加求和的意思，点一下按钮，进来一个，再点一下，又进来一个*/
}
}
function All()
{
var k = document.getElementById("k");
var ka = document.getElementById("ka");
ka.innerHTML = k.innerHTML;
}
/*总结：注意的是总体的布局，一个大的div里面又嵌了三个小的div,可以让其选择左流。*/
以上是关于JS里DOM的实际操作的主要内容，如果未能解决你的问题，请参考以下文章