你如何改变高光的颜色?

时间:2016-09-10 09:19:47

标签: javascript html selection

我设法让代码在Firefox和Internet Explorer上运行。我的问题是,当选择单词时,如何更改突出显示的颜色?目前,它使用基于用户浏览器的默认突出显示(蓝色)。当用户点击"查找"

时,我希望能够使用黄色突出显示
    <table border="0" cellpadding="0" cellspacing="0">
<tbody><tr><td valign="top" width="568">

<h3><font face="Verdana,Arial,Helvetica,sans-serif" color="#000099">
Searching for text on the current page
</font></h3>

<table border="0" cellpadding="1" cellspacing="1"><tbody><tr><td valign="top"><iframe id="srchform" src="search_form.html" border="0" scrolling="no" frameborder="0" height="50" width="220">
</iframe>

</td><td style="padding-top:3px;" valign="top" width="99"></td>
</tr></tbody></table>
<p></p>
<p>this a test this a test this a test this a test this a test this a test this a test this a test this a test this a test</p>
<p>this a test this a test this a test this a test this a test this a test this a test this a test this a test this a test</p>
<p>this a test this a test this a test this a test this a test this a test this a test this a test this a test this a test</p>
<p>this a test this a test this a test this a test this a test this a test this a test this a test this a test this a test</p>
<p>this a test this a test this a test this a test this a test this a test this a test this a test this a test this a test</p>
<p>this a test this a test this a test this a test this a test this a test this a test this a test this a test this a test</p>
<p>this a test this a test this a test this a test this a test this a test this a test this a test this a test this a test</p>
<p>this a test this a test this a test this a test this a test this a test this a test this a test this a test this a test</p>
<p>this a test this a test this a test this a test this a test this a test this a test this a test this a test this a test</p>

<script language="Javascript">
var TRange=null;

function findString (str) {
 if (parseInt(navigator.appVersion)<4) return;
 var strFound;
 if (window.find) {


  strFound=self.find(str);
  if (!strFound) {
   strFound=self.find(str,0,1);
   while (self.find(str,0,1)) continue;
  }
 }
 else if (navigator.appName.indexOf("Microsoft") != -1 || navigator.appName.toString().toUpperCase()== "NETSCAPE") {
            // EXPLORER-SPECIFIC CODE
            if (TRange != null) {
                TRange.collapse(false);
                strFound = TRange.findText(str);
                if (strFound) TRange.select();
            }
            if (TRange == null || strFound == 0) {
                TRange = self.document.body.createTextRange();
                strFound = TRange.findText(str);
                if (strFound) TRange.select();
            }
        }
        else if (navigator.appName == "Opera") {
            alert("Opera browsers not supported, sorry...")
            return;
        }
        if (!strFound) alert("String '" + str + "' not found!")
        return;
    }
</script>

以下是search_form.html(上面的iframe)的代码

<form id="f1" name="f1" action="javascript:void()" onsubmit="if(this.t1.value!=null &amp;&amp; this.t1.value!='')
parent.findString(this.t1.value);return false;">
<input id="t1" name="t1" value="text" size="20" type="text">
<input name="b1" value="Find" type="submit">
</form>

1 个答案:

答案 0 :(得分:0)

如果我的问题是正确的,那么这就是您所寻找的:selections。 Css-trick得到了很好的教程。您还必须检查浏览器支持,因为::selection选择器与所有浏览器不兼容