首页 > 代码库 > dom 关键字提示

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>

 

dom 关键字提示