How Can I Dynamically Apply Inline or External CSS in jQuery to Fix Chrome AJAX Styling Issues?

Dynamically Applying Inline or External CSS Using jQuery

You want to dynamically load an Ajax control into a Yahoo popup using jQuery and apply its own CSS to it. There are two options: inline or external stylesheet. However, you've discovered that in Chrome, the CSS loaded via AJAX is not evaluated when added to the DOM using the standard method.

To resolve this issue, jQuery offers several approaches to evaluate or apply stylesheets dynamically added to the DOM:

Loading Inline CSS

Using AJAX:

$.get(myStylesLocation, function(css)
{
   $('<style type="text/css"></style>')
      .html(css)
      .appendTo("head");
});   

Loading External CSS Using Dynamically Created

$('<link rel="stylesheet" type="text/css" href="'+myStylesLocation+'">')
   .appendTo("head");

Loading External CSS Using Dynamically Created

$('<style type="text/css"></style>')
    .html('@import url("' + myStylesLocation + '")')
    .appendTo("head");

$('<style type="text/css">@import url("' + myStylesLocation + '")</style>')
    .appendTo("head");

These solutions should effectively load and apply CSS in the popup, allowing you to maintain separate styling for your Ajax-loaded content.

The above is the detailed content of How Can I Dynamically Apply Inline or External CSS in jQuery to Fix Chrome AJAX Styling Issues?. For more information, please follow other related articles on the PHP Chinese website!