从 HTML 片段导入 CSS 样式

Question

我正在构建的网页上使用动态加载的 HTML 内容。我想要的是有一个带有 sn-ps 的 HTML 文件列表，这些文件将使用 javascript/jquery 和 ajax 请求动态导入到我的网页中。这将允许我例如将多个博客文章存储为单独的文件，并动态构建一个包含多个文章的页面。

下面是一个示例 sn-p，只有一个标题和一个小表格：

CSS：

#swimTimes2{
    background-color: #eee;
}

HTML 源代码：

<div id="itemContainer">
    <div id='swimTimes2' class='item'>
        <h1> Swim Times </h1>
        <table>
            <tr class="tableHead">
                <td>Weekdays</td><td>Weekends</td><td>Holidays</td></tr>
            <tr>
                <td>7:00am-9:00am</td><td>10:30am-8:00pm</td><td>11:00am-4:00pm</td></tr>
            <tr>
                <td>11:00am-2:00pm</td></tr>
            <tr>
                <td>4:00pm-10:30pm</td></tr>

        </table>

    </div>
</div>

我发现通过使用$.get()，我可以加载上面我的sn-p文件的内容，然后使用jquery在它中搜索我想要的html sn-p，在这种情况下是#itemContainer的内容。

JAVASCRIPT

$(document).ready( function(){
    loadContent('content/content_1.html');
});


function loadContent(fileName){

    $.get(fileName, function(data){

        var htmlContents = $(data).find("#itemContainer").children('.item').html();
        var id = $(data).find("#itemContainer").children('.item').attr('id');
        $('#content').append($('<div class="item" />').attr('id', id).html(htmlContents));

        var styleEl = $(data).find("style");
        $('head').append(styleEl);

    });
}

所以我的$.get() 处理程序函数的前 3 行工作 - 我能够导入 sn-p 并将其放在我的 html 页面上。现在，我还想将 sn-p 中的 css 样式导入到我的主页中 - 在这个例子中，我给我的项目一个灰色背景，这是一个它不会从我的主页 html 页面获得的属性。

我遇到的问题是，虽然我知道我的 sn-p 中的样式元素正在导入到我的主页中，但它包含的 css 规则并未应用于导入的 html。我错过了什么？

Answer 1

您可以在jQuery API 上执行与第二个示例类似的操作

var styleProps = $(this).css( ["width", "height", "color", "background-color"] );
$.each( styleProps, function( prop, value ) {
  html.push( prop + ": " + value );
});

$( "#result" ).html( html.join( "<br>" ) );

唯一的缺点是你必须在.css 中列出你想要的属性。但是，如果您放置所有可能的属性，它可能仍然有效，因为没有什么是真正的 null，除非该值被指定为 ''