dom 关键字提示 

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
body {
    margin: 0;
    padding: 0;
}
p {
    width: 600px;
    position: fixed;
    bottom: 5px;
}
span[title]{
    color: green;
    position: relative;
}
span {
    color: red;
}
span.title {
    color: black;
    position: absolute;
    line-height: 26px;
    padding: 0 5px;
    background: #FFFFCA;
    border: 1px solid #000;
    z-index: 1;
    white-space: nowrap;
    top: 18px;
    left: 0;
    position: absolute;
    display: none;
}
</style>
<script type="text/javascript">
    function getPos(obj)
    {
        var pos = {left:0, top:0 };
        while(obj)
        {
            pos.left += obj.offsetLeft;
            pos.top += obj.offsetTop;
            obj = obj.offsetParent;
        }
        return pos;
    }
</script>
<script type="text/javascript">
window.onload = function ()
{
    
    var op = document.getElementsByTagName('p')[0];
    var aspan = document.getElementsByTagName('span');
    
    op.style.left = (document.documentElement.clientWidth - op.offsetWidth)/2 + 'px';
    
    window.onreset = function ()
    {
        op.style.left = (document.documentElement.clientWidth - op.offsetWidth )/2 + 'px';
    };
    
    for( var i = 0 ; i < aspan.length; i++ )
    {
        if(aspan[i].getAttribute('title'))
        {
            var otip = document.createElement('span');
            otip.className = 'title';
            otip.innerHTML = aspan[i].title;
            aspan[i].appendChild(otip);
            
            aspan[i].onmouseover = function ()
            {
                this.children[0].style.display = 'block';
                if(getPos(aspan[i].children[0]).top + 26 > document.documentElement.clientLeft + document.body.scrollHeight)
                {
                    this.children[0].style.top = '-30px';
                }
            };
            
            aspan[i].onmouseout = function ()
            {
                this.children[0].style.display = 'none';
            };
        }
    }
    
    var str = aspan[0].children[0].innerHTML;
    aspan[0].children[0].innerHTML = str.split('JavaScript').join('<span style = "color:red;font-weight:bold;">JavaScript</span>')
    
};
</script>
</head>

<body>
    <p>
        <span title="JavaScript是一门很热门的语言">JavaScript</span>是面向Web的编程语言，绝大多数现代网站都使用了<span title="JavaScript">JavaScript</span>，并且所有的现代<span title="Web">Web</span>浏览器——基于<span>桌面系统</span>、游戏机、平板电脑和智能手机的浏览器——均包含了<span title="JavaScript">JavaScript</span>解释器。这使得<span title="JavaScript">JavaScript</span>能够称得上史上最广泛的编程语言。<span title="JavaScript">JavaScript</span>也是前端开发工程师必须掌握的三种技能之一，描述网页内容的<span title="HTML">HTML</span>、描述网页样式的<span title="CSS">CSS</span>以及描述网页行为的<span title="JavaScript">JavaScript</span>。
    </p>
</body>
</html>

 

posted @ 2015-01-07 16:01  mayufo  阅读(320)  评论(0)    收藏  举报