我正在使用css，如下面的aspx文件。
<link href="../include/_stylesheet.css" type="text/css" rel="stylesheet" />
我正在使用一个脚本突出显示搜索文本......
<script language="javascript" type="text/javascript" src="../include/search.js"></script>
该脚本包含以下功能......
function doHighlight(bodyText, searchTerm, highlightStartTag, highlightEndTag)
{
if ((!highlightStartTag) || (!highlightEndTag)) {
highlightStartTag = "<font style='color:blue; background-color:yellow;'>";
highlightEndTag = "</font>";
}
var newText = "";
var i = -1;
var lcSearchTerm = searchTerm.toLowerCase();
var lcBodyText = bodyText.toLowerCase();
while (bodyText.length > 0) {
i = lcBodyText.indexOf(lcSearchTerm, i+1);
if (i < 0) {
newText += bodyText;
bodyText = "";
} else {
// skip anything inside an HTML tag
if (bodyText.lastIndexOf(">", i) >= bodyText.lastIndexOf("<", i)) {
// skip anything inside a <script> block
if (lcBodyText.lastIndexOf("/script>", i) >= lcBodyText.lastIndexOf("<script", i))
{
newText += bodyText.substring(0, i) + highlightStartTag + bodyText.substring(i,searchTerm.length) + highlightEndTag;
bodyText = bodyText.substring(i + searchTerm.length);
lcBodyText = bodyText.toLowerCase();
i = -1;
}
}
}
}
return newText;
}
function highlightSearchTerms(searchText, treatAsPhrase, warnOnFailure, highlightStartTag, highlightEndTag)
{
if (treatAsPhrase) {
searchArray = [searchText];
} else {
searchArray = searchText.split(" ");
}
if (!document.body || typeof(document.body.innerHTML) == "undefined") {
if (warnOnFailure) {
alert("Sorry, for some reason the text of this page is unavailable. Searching will not work.");
}
return false;
}
var bodyText = document.body.innerHTML;
for (var i = 0; i < searchArray.length; i++) {
bodyText = doHighlight(bodyText, searchArray[i], highlightStartTag, highlightEndTag);
}
document.body.innerHTML = bodyText;
return true;
}
//GetQueryString
function getQuerystring(key, default_)
{
if (default_==null) default_="";
key = key.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
var regex = new RegExp("[\\?&]"+key+"=([^&#]*)");
var qs = regex.exec(window.location.href);
if(qs == null)
return default_;
else
return qs[1];
}
function searchString()
{
var defaultText='the page';
var treatAsPhrase='true';
var textColor='green';
var bgColor='pink';
// This function prompts the user for any words that should
// be highlighted on this web page
if (!defaultText) {
defaultText = "";
}
// we can optionally use our own highlight tag values
if ((!textColor) || (!bgColor)) {
highlightStartTag = "";
highlightEndTag = "";
} else {
highlightStartTag = "<font style='color:" + textColor + "; background-color:" + bgColor + ";'>";
highlightEndTag = "</font>";
}
if (treatAsPhrase) {
promptText = "Please enter the phrase you'd like to search for:";
}else {
promptText = "Please enter the words you'd like to search for, separated by spaces:";
}
var searchText = getQuerystring('keyword');
if (!searchText) {
return false;
}
return highlightSearchTerms(searchText, treatAsPhrase, true, highlightStartTag, highlightEndTag);
}
在页面加载后调用此javascript ... CSS停止工作....
请帮帮我。
这是我的css ..
body, td, p, ul { font-family: Arial, Helvetica, sans-serif; font-size: 12px}
td.border {border: #666666; border-style: solid; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; width: 95;}
a:link { color: #666666; text-decoration: underline}
a:visited { color: #666666; text-decoration: underline}
a:active { color: #CC0033; text-decoration: underline}
a:hover { color: #CC0033; text-decoration: underline}
a.nav:link { color: #666666; text-decoration: underline; font-size: 11px; font-weight: bold;}
a.nav:visited { color: #666666; text-decoration: underline; font-size: 11px; font-weight: bold;}
a.nav:active { color: #666666; text-decoration: underline; font-size: 11px; font-weight: bold;}
a.nav:hover { color: #CC0033; text-decoration: underline; font-size: 11px; font-weight: bold;}
a.close:link { color: #CC0033; text-decoration: underline;}
a.close:visited { color: #CC0033; text-decoration: underline;}
a.close:active { color: #CC0033; text-decoration: underline;}
a.close:hover { color: #CC0033; text-decoration: underline;}
input {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; background-color: #ffffff;
height: 20px;color:black;
}
input.txtbox {font-size: 10px; border-color:#88ACE0;border-style:solid;height:15px;width:125px;color:black}
input.txtboxSmall {font-size: 10px; border-color:#88ACE0; background-color: #ffffff; width: 100px}
.label{font-size: 12px;color:black;font-weight:normal;font-family:sans-serif;font-weight:bold;}
input.button
{
font-size:11px;
font-family:Arial;
font-weight:bold;
width:137px;
height:21px;
background: url('../images/roundedge-gray-btn1.gif') center;
border-style:none;
color:White;
}
input.smallbutton
{
font-size:11px;
font-family:Arial;
font-weight:bold;
width:71px;
height:21px;
background: url('../images/roundedge-gray-btn1.gif') center;
border-style:none;
color:White;
}
.list
{
font-family: Arial;
font-size: 10px;
font-weight:normal;
background-color: white;
border-color:#FFCCCC;
border-Style:solid;
height:50px;
width:130px;
color: black;
font-family:Verdana;
}
input.radio { background: rgb(255,255,255) }
select { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; background-color: #ffffff}
select.box { font-family: Arial, Helvetica, sans-serif; color: #000000; text-decoration: none; font-size: 8pt; width: 180;}
textarea { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; width: 290px; background-color: #ffffff}
hr { color: #cccccc; border-style: dashed}
.tableBorder { border: #666666; border-style: solid; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px}
.txt10 { font-size: 10px}
.txt14 { font-size: 14px}
.txt_white { color: #FFFFFF}
.txt_grey {
color: #666666;
font-size: 10px;
}
.txt_greynav {
color: #666666;
font-size: 10px;
}
.txt_grey12 {
color: #666666;
font-size: 12px;
font-weight: bold
}
.txt_block { padding-top: 5px; padding-right: 7px; padding-bottom: 5px; padding-left: 7px; line-height: 18px}
td { }.txt10_add { font-size: 10px; color: #6699cc}
.arial8 { font-family: Arial, Helvetica, sans-serif; color: #000000; text-decoration: none; font-size: 8pt}
.arial10 {
font-family: Arial, Helvetica, sans-serif;
font-size: 10pt;
color: #666666;
font-weight: bold;
}
.add {
color: #CC0033;
font-size: 12px;
font-weight: bold;
}
.arial10 {
font-family: Arial, Helvetica, sans-serif;
font-size: 10pt;
color: #666666;
font-weight: bold;
}
.txtheader {
color: #990033;
font-size: 14px;
font-weight: bold;
}
.txthelp {
color: #000000;
font-size: 16px;
font-weight: bold;
}
.txtex {
color: #000000;
font-size: 12px;
font-weight: bold;
font-style: italic;
}
pre
{
color: maroon;
}
H2
{
color: #cc0033;
}
答案 0 :(得分：1)
该脚本将<font>标记中的部分文本包装在页面上。对DOM的更改可能导致CSS样式表中使用的选择器不再适用于受影响的文本。你还没有发布CSS，所以很难说出究竟是什么问题，但是（例如）如果你有一个规则将某些字体特征应用于所有（并非罕见），并且然后那些被特定元素的其他CSS规则覆盖，然后引入的<font>标记可能会搞砸了所有这些。
另一个更隐蔽的可能性是代码没有正确地跳过HTML元素。如果<font>标签最终打破了整个页面DOM结构，那么所有的赌注都会关闭，难怪CSS停止工作。