<!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 关键字提示的更多相关文章

  1. 解决方案：Resharper对系统关键字提示‘can not resolve symbol XXX’，并且显示红色，但是编译没有问题

    环境:Visual studio 2013 community update 4 + Resharper 8.2 + Windows 7现象:我的C#工程编译没有问题, 但是在代码编辑器中系统关键字显 ...

  2. 【转载】解决方案：Resharper对系统关键字提示‘can not resolve symbol XXX’，并且显示红色，但是编译没有问题

    环境:Visual studio 2013 community Update 4 + Resharper 8.2 + Windows 7 现象: 我的C#工程编译没有问题, 但是在代码编辑器中系统关键 ...

  3. 基于vue的多引擎搜索及关键字提示

    关键代码: <div class="header-search"> <form id="form" action="http://m ...

  4. CSS关键词的值-currentColor关键字提示文字(当前颜色)

    currentColor关键字 currentColor关键字相当于一个CSS变量. currentColor关键字与CSS变量也是有区别的: (1)他只可以能接受<color>值的地方使 ...

  5. input 关键字提示，对于一些特定优化来说，很有用处

    只用html就可以做出提醒操作:效果如下图 这里是代码,怎么样,很简单吧 <form action="/server" method="post"> ...

  6. 使用jsonp跨域调用百度js实现搜索框智能提示，并实现鼠标和键盘对弹出框里候选词的操作【附源码】

    项目中常常用到搜索,特别是导航类的网站.自己做关键字搜索不太现实,直接调用百度的是最好的选择.使用jquery.ajax的jsonp方法可以异域调用到百度的js并拿到返回值,当然$.getScript ...

  7. Visual Studio 2013 在使用 MVC5 无智能提示

    关于 Visual Studio 2013 在使用 MVC5 无智能提示的问题,类库无法正常识别,连最基本的关键字提示都没有了,类变色也没有了,所有的关键字代码,类名,方法成员名都要全部手动敲 原因: ...

  8. new 关键字

    学习过的调用或者是执行函数的方式有几种? ①函数名+小括号 ②事件处理函数 ③定时器 ④数组里面的元素是函数,枚举出来执行 ⑤new关键字 提示:需要注意new 关键字需要在函数名前面使用 构造函数是 ...

  9. Phaser游戏框架与HTML Dom元素之间的通信交互

    本想按照PHASER的HTML Dom元素官方实例:http://labs.phaser.io/index.html?dir=game%20objects/dom%20element/&q=  ...

随机推荐

  1. 源码解析Android中View的measure量算过程

    Android中的Veiw从内存中到呈现在UI界面上需要依次经历三个阶段:量算 -> 布局 -> 绘图,关于View的量算.布局.绘图的总体机制可参见博文< Android中View ...

  2. 无锁编程(六) - seqlock(顺序锁)

    seqlock(顺序锁) 用于能够区分读与写的场合,并且是读操作很多.写操作很少,写操作的优先权大于读操作. seqlock的实现思路是,用一个递增的整型数表示sequence.写操作进入临界区时,s ...

  3. minimum-moves-to-equal-array-elements

    https://leetcode.com/problems/minimum-moves-to-equal-array-elements/ package com.company; import jav ...

  4. hdu1050(贪心)

    囧 . 想了好久,一开始想的是一个连通图怎样用黑白两色染色,想了各种算法发现都不好做,然后灵机一动这不是网路流吗,然后想怎么建图,如果转换成网络流这题就好做了,建图加个二分应该就可以解决了,最后又发现 ...

  5. Qt之QHeaderView自定义排序（获取正确的QModelIndex）

    简述 前几节中分享过关于自定义排序的功能,貌似我们之前的内容已经可以很好地解决排序问题了,但是,会由此引发一些很难发现的问题...比如:获取QModelIndex索引错误. 下面,我们先来实现一个整行 ...

  6. poj2942 Knights of the Round Table 双连通分支 tarjan

    题解:http://blog.csdn.net/lyy289065406/article/details/6756821 讲的很详细我就不多说了. 题目连接:http://poj.org/proble ...

  7. highCharts图表应用-实现多种图表的显示

    在数据统计和分析业务中,有时需要在一个图表中将柱状图.饼状图.曲线图的都体现出来,即可以从柱状图中看出具体数据.又能从曲线图中看出变化趋势,还能从饼状图中看出各部分数据比重.highCharts可以轻 ...

  8. POJ 3211 Washing Clothes【01背包】

    题意:给出n种颜色,m件衣服,再分别给出m件衣服的颜色,和洗所需要的时间,dearboy和他的妹子一起洗衣服,且同种颜色的衣服不能同时洗,也不能两个人同时洗一件衣服,问洗完这m件衣服至少需要的时间 先 ...

  9. [转载] mysql5.6 删除之前的ibdata1文件后再重新生成，遇到[Warning] Info table is not ready to be used. Table 'mysql.slave_master_info' cannot be opened.问题

    [转载] mysql5.6 删除之前的ibdata1文件后再重新生成,遇到[Warning] Info table is not ready to be used. Table 'mysql.slav ...

  10. jquery 连写注释;siblings() 方法;jQuery 的3种滑动方法;slideUp()向上滑动;slideDown()向下滑动;slideToggle()来回滑动

    首先我们看两个连写注释 第一个:   /* 点击头像,显示基本资料 */ $(".f-chatTit a.avatar").click(function(){ $(this).hi ...