CSS樣式未應用於JavaScript輸出的HTML元素-XML / XSLT-ASP.NET-C＃

Question

我目前正在使用XML / XSLT技術來完成一些大學課程。 我正在通過JavaScript函數處理XML文件和XSLT文件，並將結果HTML輸出到ASP.NET文檔中。

由於某些原因，盡管.aspx文檔具有指向CSS文件的正確鏈接，但HTML尚未應用任何樣式。 其他HTML上.aspx文件，該文件還沒有被輸出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);
};

有什么建議么？

Answer 1

嘗試更改此：

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

對此：

document.getElementById(location).innerHTML = resultDocument;

如果所有者文檔本身是HTMLDocument或樣式表的輸出方法是HTML，則transformToFragment將僅生成HTML DOM對象。

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

CSS樣式未應用於JavaScript輸出的HTML元素-XML / XSLT-ASP.NET-C＃

問題描述

1 個解決方案

解決方案1
0 已采納 2014-04-30 16:53:21

CSS樣式未應用於JavaScript輸出的HTML元素-XML / XSLT-ASP.NET-C＃

問題描述

1 個解決方案

解決方案1 0 已采納 2014-04-30 16:53:21

解決方案1
0 已采納 2014-04-30 16:53:21