<script type="text/javascript" src="../../jsLib/mfHighlighter.js?v=1.1"></script>

这里提供了一个通用的代码,用来高亮显示指定的列表元素,所谓指定的元素,是指以下几种:

  • 一列菜单中的某个具体菜单
  • 一个表格中指定的行
  • 列表中的某一项

要看效果,你可以点击上面的列表项就会看到被点击的列表项会以蓝底白色显示。

其实,这个通用代码不仅可以高亮显示列表元素,它可以用来高亮显示任何对象。只是我们的高亮显示需求,一般表现为突出显示列表中当前选择的元素。

它的用法为:

<script type="text/javascript" src="http://www.myfootprints.cn/jsLib/mfHighlighter.js"></script>
var oH = new mfHighlighter();
oH.highlight(<你指定的对象>, [指定的高亮CSS类别名], [指定的高亮CSS字符串]);

比如,为达到以蓝底白字高亮显示以上列表,调用highlight()方法时的具体代码为:

<script type="text/javascript" src="http://www.myfootprints.cn/jsLib/mfHighlighter.js"></script>
var oH = new mfHighlighter();
oH.highlight(document.getElmentById('li元素的Id值'), null, 'background-color: blue; color: white;');
  1. 第一个参数<你指定的对象>是一个DOM对象;
  2. 第二个参数[指定的高亮CSS类别名]是你为高亮显示的元素所设置的CSS类别名,如selected。
    .selected {
    background-color: blue;
    color: white;
    }
    
    ,如果省略它,则高亮显示的样式取决于第三个参数;
  3. 第三个参数[指定的高亮CSS字符串]是你为高亮显示的元素所设置的CSS样式字符串,如'background-color: blue; color: white;'。如果省略它,则高亮样式取决于第二个参数。

你可以将高亮显示代码嵌入在元素的onclick事件中,以便当点击某元素后高亮显示它。这是一般的需求。当然也可以应用在onmouseover事件上。但是对于支持最新CSS标准的浏览器来说,对于这个需求,可以通过设置:hover伪类的CSS特性值来实现高亮,而不需要使用JavaScript。比如以下CSS代码给表格1带来的显示效果:

tr:hover {
background-color: #3d80df;
color: #fff;
}

表1:系统磁盘信息
名称 类型 总大小 可用空间 是否可用
系统 (C:)硬盘驱动器18.22 GB2.84 GBTrue
软件 (D:)硬盘驱动器18.22 GB7.85 GBTrue
资料 (E:)硬盘驱动器18.22 GB331.81 MBTrue
娱乐 (F:)硬盘驱动器18.22 GB2.77 GBTrue
光盘驱动器 (G:)光盘驱动器00False
光盘驱动器 (H:)光盘驱动器00False

注意,如果你的浏览器支持最新的CSS标准,那么你看到的鼠标经过时的高亮仅仅是由CSS完成的没有JavaScript的参与。而这样的高亮不能保持,即鼠标移走后,高亮条就消失了。而使用JavaScript完成的就是保持高亮,即你用鼠标点击某一行移走了鼠标,该行仍然突出显示。

好了,说了这么多,最后将高亮显示的JavaScript源代码贴出来(mfHighlighter.js):

//***********************************************************************************************************************
// mfHighlighter 对象
//
// 日期                 开发者                      行为
// ----------------------------------------------------------------------------------------------------------------------
// 2010-1-27            [email protected]       由于 IE 中会将 style.cssText 中的属性名称大写,以及去掉最后一个分号,
//                                                  导致前一版本的 mfHighter 不能对元素反高亮。此版本1.1修复了这个问题。
//***********************************************************************************************************************

function mfHighlighter() { this.version = 1.1; }

mfHighlighter.prototype.highlight = function(o, sClassName, sCssText) { var oParent = o.parentNode; var oChilds = oParent.childNodes;

// 去掉 sCssText 字符串中的最后一个分号(如果有的话)
sCssText = sCssText.replace(/;$/, '');

// 首先去掉所有与 o 同节点类型的元素的高亮样式
for (var i = 0; i &lt; oChilds.length; i++) {
    if (oChilds[i].nodeType == o.nodeType) {
        var re = new RegExp(' *' + sClassName);
        oChilds[i].className = oChilds[i].className.replace(re, '');

        if (sCssText) {
            if (oChilds[i].style.cssText) {
                if (oChilds[i].style.cssText.toLowerCase().lastIndexOf(sCssText.toLowerCase()) + sCssText.length == oChilds[i].style.cssText.length) {

                    // 如果 sCssText 是该元素的 cssText 字符串的最后一部分
                    oChilds[i].style.cssText = oChilds[i].style.cssText.replace(new RegExp(sCssText, 'gi'), '');
                } else {
                    // 如果 sCssText 不是该元素的 cssText 字符串的最后一部分,则要连同分号一起去掉
                    oChilds[i].style.cssText = oChilds[i].style.cssText.replace(new RegExp(sCssText + ';', 'gi'), '');
                }
            }
        }
    }
}
// 然后给要高亮的元素一个高亮类
o.className += ' ' + sClassName;
if (sCssText) {
    if (o.style.cssText) {
        o.style.cssText += sCssText;
    } else {
        o.style.cssText = sCssText;
    }
}

}

现在就来练习它!