CSS 样式未应用于 JavaScript 输出的 HTML 元素 - XML/XSLT - ASP.NET - C#答案

【问题标题】：CSS styling not being applied to HTML elements outputted by JavaScript - XML/XSLT - ASP.NET - C#CSS 样式未应用于 JavaScript 输出的 HTML 元素 - XML/XSLT - ASP.NET - C#
【发布时间】：2014-04-30 16:10:03
【问题描述】：

我目前正在使用 XML/XSLT 技术完成一些大学课程。我正在通过 JavaScript 函数处理 XML 文件和 XSLT 文件，并将生成的 HTML 输出到ASP.NET 文档。

由于某种原因，HTML 没有应用任何样式，尽管 .aspx 文档具有指向 CSS 文件的正确链接。 .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);
};

有什么建议吗？

【问题讨论】：

你能给我们看看你的css吗？
当然。现已添加。
生成的.aspx 文件是否位于查看 CSS 文件的正确位置/路径？
从母版页成功链接到 CSS 文件，页面上的其他元素正在设置样式，只是不是 JavaScript 生成的 HTML。
我感觉生成的标记可能格式不正确。您能否尝试通过validator.w3.org/#validate_by_input 运行它 - “*”选择器将针对所有元素 - 所以如果包含 css 文件，那么它必须是无效/格式错误的 html。

标签： c# javascript html asp.net css

【解决方案1】：

尝试改变这个：

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

到这里：

document.getElementById(location).innerHTML = resultDocument;

transformToFragment 仅在所有者文档本身是 HTMLDocument 或样式表的输出方法是 HTML 时才会生成 HTML DOM 对象

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

【讨论】：

这是然后输出到页面的内容：[object DocumentFragment] 这就是我使用 appendChild 的原因。 “如果所有者文档本身是 HTMLDocument，或者样式表的输出方法是 HTML，则transformToFragment 只会生成 HTML DOM 对象”...这是否意味着该文件不能是 .aspx 文件？
我刚刚将 XSLT 文件的输出方法更改为 HTML 并解决了问题！非常感谢
没问题，如果对您有帮助，请随时标记为答案。