Javascript覆盖CSS

我在css上使用aspx文件，如下所示

<link href="../include/_stylesheet.css" type="text/css" rel="stylesheet" />

---

脚本将页面上的部分文本包装在

标记中。对DOM的更改可能会导致CSS样式表中使用的选择器不再应用于受影响的文本。您还没有（尚未）发布CSS，因此很难说到底是什么错误，但是（例如）如果您有一个规则将某些字体特征应用于所有内容（并非不常见），然后这些内容被特定元素的其他CSS规则覆盖，那么引入的

标记可能会把这一切搞糟

---

另一个更隐蔽的可能性是代码没有正确跳过HTML元素。如果

标记最终破坏了整个页面DOM结构，那么所有的赌注都被取消了，难怪CSS停止工作。

我们在过去十年中停止使用字体标记。使用一个SPAN。发布CSS和HTMLW也可能有帮助。这里的问题到底是什么？我不明白。你能补充更多关于错误的细节吗？我同时使用脚本和css，如果我在aspx页面加载中调用javascript函数，css不会working@vasmay“不工作”是什么意思？会发生什么？你能发布一个实时链接吗？样式表是否加载到Firebug中？

<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);
}

    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;
}