Js 修改 HTML 的 title 属性的样式，且经过测试，代码能够兼容IE， FF， Chrome（本人认为能够经得住这几大浏览器的考验，其他东西就是浮云啦）

现在的位置: 首页 > 综合 > 正文

Js 修改 HTML 的 title 属性的样式，且经过测试，代码能够兼容IE， FF， Chrome（本人认为能够经得住这几大浏览器的考验，其他东西就是浮云啦）

2013年11月04日 ⁄ 综合 ⁄ 共 2637字 ⁄ 字号小中大 ⁄ 评论关闭

<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>自定义title - azhong.com</title>
</head>
<body >
<p><B>自定义title</B>(IE & FireFox...)：把鼠标放在下面的文字上查看效果</p>
<span title="Javascript" title="">默认效果</span><br><br>
<span title="<marquee style='width:60px;'>www.azhong.com</marquee><br/>sadfkjasldfj" altbg="red" altcolor="yellow" altborder="yellow">滚动字幕</span><br><br>
<span title="<img src='http://www.azhong.com/azhong.com.logo.gif' border='0'>" altbg="#F7F7F7" altcolor="#999999" altborder="#CCCCCC">图片</span><br><br>
<span title="<i style='font-size:18pt;font-family:verdana;'>welcome to <font color='yellow'>www.azhong.com</font></i><a href='#'>sdfsdaf</a>" altbg="green" altcolor="black" altborder="darkgreen">大字体大</span><br><br>
<div style="display:none;border:1px solid #000000;background-color:#FFFFCC;font-size:12px;position:absolute;padding:2;" id="_altlayer"></div>
<script language="JavaScript">
<!--
document.body.onmousemove=quickalt;
document.body.onmouseover=getalt;
document.body.onmouseout=restorealt;
var tempalt='';

var UA=navigator.userAgent.toLowerCase();
var ISIE=(UA.indexOf("msie") > 0);
function $(hw_){return document.getElementById(hw_);}

function _Move(evn,o){
    _bW=document.body.clientWidth;
    _left1=document.body.scrollLeft+evn.clientX+10;
    _oW=o.offsetWidth;
    _left=((evn.clientX+_oW)>_bW)?(_left1-_oW-10):_left1;
    if((evn.clientX+_oW)>_bW){_left=(_oW<evn.clientX)?(_left1-_oW-10):_left1;}

    _bH=document.body.clientHeight;
    _top1=document.body.scrollTop+evn.clientY+6;
    _oH=o.offsetHeight;
    _top=((evn.clientY+_oH)>_bH)?(_top1-_oH-6):_top1;
    if((evn.clientY+_oH)>_bH){_top1=(_oH<evn.clientY)?(_top1-_oH-6):_top1;}
    o.style.left=_left;
    o.style.top=_top;
}

function getalt(hw_){
    if(ISIE){evn=event}else{evn=hw_}
    var eo = evn.srcElement?evn.srcElement:evn.target;
    if(eo.title && (eo.title!=""|| (eo.title=="" && tempalt!=""))){
        o = $("_altlayer");
        _Move(evn,o);
        o.style.display='';
        tempalt=eo.title;
        tempbg=eo.getAttribute("altbg");
        tempcolor=eo.getAttribute("altcolor");
        tempborder=eo.getAttribute("altborder");
        eo.title='';
        o.innerHTML=tempalt;
        if (tempbg!=null){o.style.background=tempbg}else{o.style.background="infobackground"}
        if (tempcolor!=null){o.style.color=tempcolor}else{o.style.color=tempcolor="infotext"}
        if (tempborder!=null){o.style.border="1px solid "+tempborder;}else{o.style.border="1px solid #000";}
    }
}
function quickalt(hw_){
    if(ISIE){evn=event}else{evn=hw_}
    o = $("_altlayer");
    if(o.style.display==""){
        _Move(evn,o);
    }
}
function restorealt(hw_){
    if(ISIE){evn=event}else{evn=hw_}
    var eo = evn.srcElement?evn.srcElement:evn.target;
    eo.title=tempalt;
    tempalt="";
    $("_altlayer").style.display="none";
}
//-->
</script>

</body>
</html>

该代码能够识别title 属性中的html标签等，不得不说，这是解决很多用 Js 做 “提示信息功能” 的同志们的神器啊！代码为网络上搜寻到，同各位分享。