我设法让代码在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 && 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>
答案 0 :(得分:0)
如果我的问题是正确的,那么这就是您所寻找的:selections。 Css-trick得到了很好的教程。您还必须检查浏览器支持,因为::selection
选择器与所有浏览器不兼容