How Can I Dynamically Load Inline or External CSS with jQuery?

Applying Inline or External CSS Dynamically Loaded with jQuery

When loading HTML content via AJAX using jQuery, it may be necessary to include specific CSS styles for proper rendering. However, dynamically added CSS may not be evaluated by the browser at the time of insertion.

Options for Dynamic CSS Injection

There are several approaches to dynamically inject CSS into the DOM:

Inline StyleSheet

Dynamically create a

var myCSS = 'body { background-color: red; }';
$('<style type="text/css">').html(myCSS).appendTo('head');</style>

External StyleSheet

Use jQuery's $.get() method to load an external CSS file:

$.get('myStyles.css', function(css) {
  $('<link rel="stylesheet" type="text/css" href="myStyles.css">').appendTo('head');
});

Dynamically Create Tag

Create a element dynamically and append it to the

section:

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

Dynamically Create

Use @import within a dynamically created

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

Supported Browsers

Internet Explorer will evaluate inline CSS when added dynamically, but Chrome requires the use of @import for external CSS to be evaluated. Firefox support for dynamic CSS injection may vary depending on the version.

The above is the detailed content of How Can I Dynamically Load Inline or External CSS with jQuery?. For more information, please follow other related articles on the PHP Chinese website!