Import CSS styles from HTML snippet

Question

I'm playing around with dynamically loaded HTML content on a webpage I am building. What I want is to have a list of HTML files with snippets that will be dynamically imported into my webpage using javascript/jquery and an ajax request. This would allow me to e.g. store several blog posts as separate files and dynamically build a page with multiple posts on it.

Below is an example snippet with just a title and a small table:

CSS :

#swimTimes2{
    background-color: #eee;
}

HTML SOURCE :

<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>

I figured out that by using $.get() I can load the contents of my snippet file above and then use jquery to search through it for the html snippet I want, in this case the contents of #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);

    });
}

So the first 3 lines of my $.get() handler function work - I am able to import the snippet and put it up on my html page. Now I want to import also the css styles from the snippet into my main page - in this example I gave my item a grey background, a property that it wouldn't get from my main html page.

The issue I have is that although I know the style element from my snippet is being imported into my main page, the css rules it contains are not applied to the imported html. What am I missing?

How do you know that your imported styles are in the right place? Do they show up when you inspect the page code? — Marc Audet
– Marc Audet, Commented Jun 28, 2013 at 12:26
Is the imported page in an ifram? Otherwise, you might have issues having two <html>, <head> and <body> tags. — Jeff Noel
– Jeff Noel, Commented Jun 28, 2013 at 12:29
@Ghillied I am not using an i-frame. I'm taking the contents of #itemContainer as a string and interpreting it as a jquery element, then appending it to a div on my main page. — AnjoMan
– AnjoMan, Commented Jun 28, 2013 at 19:24
@MarcAudet as you said, I know they show up by using 'Inspect Element(Q)' in Firefox - it appears as second <style> item in the head — AnjoMan
– AnjoMan, Commented Jun 28, 2013 at 19:24

Zach Saucier · Accepted Answer · 2013-06-28 12:45:27Z

1

You can do a similar thing to the second example on the 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>" ) );

The only negative thing is that you have to list in the .css which attributes you want. However if you put all of the possible attributes it likely still work because there is nothing is truly null unless the value is specified to be ''

edited Jun 28, 2013 at 12:45

answered Jun 28, 2013 at 12:33

Zach Saucier

26.2k12 gold badges101 silver badges161 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

AnjoMan Over a year ago

I'm assuming you would also have to do this for each element in the snippet, right?

Zach Saucier Over a year ago

You could use a loop to iterate through them all, but I believe so

AnjoMan Over a year ago

Ok, I tried this but I don't think it works because the html is not actually being rendered by a browser, just explored using Jquery, so the CSS is not going to be interpreted. a command like $('#swimTimes2').css(["background"]); returns ({'background-color':"transparent"}), meaning that the background-color statement is never applied to the html element. This makes me think, though, that it would be possible to parse the css rules by selector and apply them individually.

Zach Saucier Over a year ago

Yes, but you can change the css of an object using .css as well using the format $("#swimTimes2").css({'background' : 'grey', 'height': '50px'});. This means you can create an array in the .each loop to store each css attribute (using identifiers like this) and put it onto another element using the .css format $("#swimTimes2").css({'background' : array["background"], 'height': array["height"]});

Collectives™ on Stack Overflow

Import CSS styles from HTML snippet

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related