从HTML代码段导入CSS样式

Import CSS styles from HTML snippet

本文关键字：导入 CSS 样式 HTML 代码 段导入      更新时间：2023-09-26

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

下面是一个只有标题和一个小表格的示例片段：

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()，我可以加载上面的代码片段文件的内容，然后使用jquery在其中搜索我想要的html代码片段，在本例中是#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行可以工作——我可以导入代码片段并将其放在我的html页面上。现在，我还想将代码片段中的css样式导入到我的主页中——在这个例子中，我为我的项目提供了灰色背景，这是它无法从我的主html页面中获得的属性。

我遇到的问题是，尽管我知道我的代码片段中的样式元素正在导入到我的主页中，但它所包含的css规则并没有应用于导入的html。我错过了什么？

您可以在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，除非将值指定为''

相关文章：