慎用option中的title属性,及其替代方法
2010-07-06 11:37
295 查看
如下图所示的多选框列表,要是鼠标点击某个条例时,显式该条例的详细内容。
在页面中加了一个div,当鼠标移动时通过onmousemove="selMouseOver(this)",来设置并显式div的值。
在IE6中没有问题,鼠标点击后,显式条例的具体内容;
IE7和8,当鼠标移动时,就显式条例的具体内容,点击后,又显式了一遍,重复了。将onmousemove="selMouseOver(this)"去掉后,IE7和8竟然还能显式。
原因就在:在option中设置了title属性,<option title='...' value='...'/>
当鼠标放在下拉框中的某一行时,可以显式title中的内容。
<option title ='...'/> 的替代方法:
1、定义一个div,设置好样式
<div id="div_hint" style="display:none; position:absolute">
<iframe id="bb" style="position:absolute; z-index: 99;width:300px; filter:Alpha(opacity=0)" frameborder="0"></iframe>
<div id="aa" style="width:300px; border: 1px #9c9c9c solid;font-size:12px;color:black;position:absolute;background-color: #F7F7F7;layer-background-color: #0099FF; filter:Alpha(style=0,opacity=80,finishOpacity=100);"></div>
</div>
2、通过onmousemove="selMouseOver(this)"给他设置值并显式,onmouseout="selMouseOut(this)"关闭显式
function selMouseOver(obj){
if(obj.selectedIndex == -1){return;}
var div_hint = document.getElementById("div_hint");
div_hint.style.display = "block"
document.getElementById("aa").innerHTML = obj[obj.selectedIndex].id;------这里显式的是option中的id属性的值
div_hint.style.left = event.clientX + document.body.scrollLeft+ 10 + 'px';
div_hint.style.top = event.clientY + document.body.scrollTop + 10 + 'px';
document.getElementById("bb").style.height = document.getElementById("aa").offsetHeight + "px";
}
function selMouseOut(obj){
div_hint.style.display = "none"
}
在页面中加了一个div,当鼠标移动时通过onmousemove="selMouseOver(this)",来设置并显式div的值。
在IE6中没有问题,鼠标点击后,显式条例的具体内容;
IE7和8,当鼠标移动时,就显式条例的具体内容,点击后,又显式了一遍,重复了。将onmousemove="selMouseOver(this)"去掉后,IE7和8竟然还能显式。
原因就在:在option中设置了title属性,<option title='...' value='...'/>
当鼠标放在下拉框中的某一行时,可以显式title中的内容。
<option title ='...'/> 的替代方法:
1、定义一个div,设置好样式
<div id="div_hint" style="display:none; position:absolute">
<iframe id="bb" style="position:absolute; z-index: 99;width:300px; filter:Alpha(opacity=0)" frameborder="0"></iframe>
<div id="aa" style="width:300px; border: 1px #9c9c9c solid;font-size:12px;color:black;position:absolute;background-color: #F7F7F7;layer-background-color: #0099FF; filter:Alpha(style=0,opacity=80,finishOpacity=100);"></div>
</div>
2、通过onmousemove="selMouseOver(this)"给他设置值并显式,onmouseout="selMouseOut(this)"关闭显式
function selMouseOver(obj){
if(obj.selectedIndex == -1){return;}
var div_hint = document.getElementById("div_hint");
div_hint.style.display = "block"
document.getElementById("aa").innerHTML = obj[obj.selectedIndex].id;------这里显式的是option中的id属性的值
div_hint.style.left = event.clientX + document.body.scrollLeft+ 10 + 'px';
div_hint.style.top = event.clientY + document.body.scrollTop + 10 + 'px';
document.getElementById("bb").style.height = document.getElementById("aa").offsetHeight + "px";
}
function selMouseOut(obj){
div_hint.style.display = "none"
}
相关文章推荐
- js将table的每个td的内容自动赋值给其title属性的方法
- TextView 常用属性及其对应方法
- JavaScript常用内置对象及其相应属性和方法(一)
- html中隐藏title属性方法
- javascript-声明对象及其属性和方法
- html title换行方法 如a链接标签内title属性鼠标悬停提示内容换行
- JS的对象及其属性和方法
- 【JS基础回顾】Array对象及其常用属性以及方法
- 外部访问 Vue 中的 methods方法及其属性
- JS教程:String对象及其常用属性以及方法
- jQuery源码学习 item2-jQuery对象及其属性和方法
- JS更改select内option属性的方法
- 在eclipse中查看一个类及其父类中的所有方法和属性
- Five-People:常用控件及其属性(RadioButton,CheckBox,align,margin,padding)使用方法
- 通过封装编写Book类。要求:类具有私有属性书名title、页数pageNum、类型type(默认为计算机类),并为这三个属性分别编写set和get方法。其中,页数不能少于200页,否则输出错误信息,
- C++慎用define,以及相关的替代的方法
- javascript:document的属性和方法,title,innerHTML,
- 【JS基础回顾】String对象及其常用属性以及方法
- JavaScript 学习笔记——Math属性及其方法
- 转载website 设置title属性 方法