Home > Web Front-end > CSS Tutorial > How Can I Dynamically Apply Inline or External CSS in jQuery to Fix Chrome AJAX Styling Issues?

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

Patricia Arquette
Release: 2024-12-15 12:49:39
Original
548 people have browsed it

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");
});   
Copy after login

Loading External CSS Using Dynamically Created

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

Loading External CSS Using Dynamically Created