未將CSS樣式應用於JavaScript輸出的HTML元素--C＃

我目前正在使用XML/XSLT技術來完成大學課程。我處理的XML文件和XSLT文件通過的JavaScript功能和輸出所得到HTML爲ASP.NET文件。未將CSS樣式應用於JavaScript輸出的HTML元素--C＃

出於某種原因，HTML是不是有適用於任何風格，儘管有一個正確的鏈接到CSS文件.aspx文件。 .aspx文件上的其他HTML文件沒有被JavaScript,輸出的文件爲正確樣式。

母版頁：

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="master.master.cs" Inherits="master" %> 
<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 

    <head> 

     <!-- Meta --> 
     <title>Site Title</title> 
     <base href="http://co-web.lboro.ac.uk/colb3web/" /> 
     <meta http-equiv="Content-type" content="text/html;charset=UTF-8" /> 

     <!-- Styles --> 
     <link rel="stylesheet" href="css/style.css" /> 

     <!-- Scripts --> 
     <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
     <script type="text/javascript" src="js/script.js"></script> 

     <!-- Head Placeholder --> 
     <asp:ContentPlaceHolder id="head" runat="server"></asp:ContentPlaceHolder> 

    </head> 

    <body> 

     <article id="site"> 

      <!-- HEADER --> 
      <header id="site_header" class="section"> 
       <section id="site_branding"> 
        <h1>Site title</h1> 
       </section> 

       <!-- Header Navigation --> 
       <nav id="site_header-navigation" class="subsection">Header navigation</nav> 

      </header> 

      <!-- PAGE --> 
      <article id="page"> 

       <!-- Header --> 
       <header id="page_header" class="section">Page header</header> 

       <!-- Body Placeholder --> 
       <asp:ContentPlaceHolder id="body" runat="server"></asp:ContentPlaceHolder> 

       <!-- Footer --> 
       <footer id="page_footer" class="section">Page footer</footer> 

      </article> 

      <!-- FOOTER --> 
      <footer id="site_footer" class="section"> 

       <!-- Footer Navigation --> 
       <nav id="site_footer-navigation" class="subsection">Footer navigation</nav> 

      </footer> 

     </article> 

    </body> 

</html>

的.aspx文件：

<asp:content contentplaceholderid="head" runat="server"> 

    <!-- Script --> 
    <script type="text/javascript"> 
     $(document).ready(
      function() { 
       outputXML('content', './posts/posts.xml', './xslt/lists.xslt'); 
      } 
     ); 
    </script> 

</asp:content> 
<asp:content contentplaceholderid="body" runat="server"> 

    <!-- Content --> 
    <section id="content"> 

    </section> 

</asp:content>

CSS文件：

* { 
    padding: 0; 
    margin: 0; 
    border: 0; 
} 

.section { 
    padding: 10px 0em; 
} 
.subsection { 
    padding: 10px 1em; 
} 
.area { 
    padding: 5px 0.5em; 
} 
.block { 
    padding: 5px 0.5em; 
}

JavaScript文件：

/* HTTP Request */ 
function loadXML(file) { 
    if (window.XMLHttpRequest) { 
     // code for Chrome, Firefox, Opera, etc. 
     xhttp = new XMLHttpRequest(); 
    } else { 
     // code for IE 
     xhttp = new ActiveXObject("Microsoft.XMLHTTP"); // Different ActiveXObject for IE 
    }; 
    xhttp.open("GET", file, false); 
    try { xhttp.responseType = "msxml-document"; } catch (e) { }; // Set responseType for IE 9+ 
    xhttp.send(null); 
    return xhttp.responseXML; 
}; 

/* Process & Output */ 
function processXML(location, xml, xsl) { 
    if (window.ActiveXObject || xhttp.responseType == "msxml-document" || "ActiveXObject" in window) { // Added criteria for IE detection 
     // code for IE 
     ex = xml.transformNode(xsl); 
     document.getElementById(location).innerHTML = ex; 
    } else if (document.implementation && document.implementation.createDocument) { 
     // code for Chrome, Firefox, Opera, etc. 
     xsltProcessor = new XSLTProcessor(); 
     xsltProcessor.importStylesheet(xsl); 
     resultDocument = xsltProcessor.transformToFragment(xml, document); 
     document.getElementById(location).innerHTML = ''; 
     document.getElementById(location).appendChild(resultDocument); 
    }; 
}; 

/* HTTP Request, Process & Output */ 
function outputXML(location, xmlFile, xslFile) { 
    xml = loadXML(xmlFile); 
    xsl = loadXML(xslFile); 
    processXML(location, xml, xsl); 
};

有什麼建議嗎？

來源

2014-04-30 LeeBrooks3

你能告訴我們你的CSS嗎？ –

當然。現在添加。 – LeeBrooks3

生成的'.aspx'文件是否在*參見* CSS文件的正確位置/路徑中？ – DGibbs

嘗試修改此：

document.getElementById(location).innerHTML = ''; 
document.getElementById(location).appendChild(resultDocument);

這樣：

document.getElementById(location).innerHTML = resultDocument;

transformToFragment只會產生HTML DOM對象如果所有者文檔本身是HTMLDocument的，或者如果該輸出方法樣式表是HTML

ref：https://developer.mozilla.org/en/docs/Using_the_Mozilla_JavaScript_interface_to_XSL_Transformations#transformToFragment

來源

2014-04-30 16:53:21

這是什麼然後輸出到頁面：'[object DocumentFragment]'這就是爲什麼我使用appendChild。「如果所有者文檔本身是HTMLDocument，或者樣式表的輸出方法是HTML」transformToFragment只會生成HTML DOM對象「......這是否意味着文件不能是'.aspx'文件？ – LeeBrooks3

我只是將XSLT文件的輸出方法更改爲HTML並解決問題！非常感謝 – LeeBrooks3

沒問題，隨時標記爲答案，如果它幫助你。 –

未將CSS樣式應用於JavaScript輸出的HTML元素--C＃

回答

相關問題