如何使用 jQuery 动态加载内联或外部 CSS？

应用使用 jQuery 动态加载的内联或外部 CSS

使用 jQuery 通过 AJAX 加载 HTML 内容时，可能需要包含特定的 CSS正确渲染的样式。但是，动态添加的 CSS 在插入时可能不会被浏览器评估。

动态 CSS 注入选项

有多种方法可以将 CSS 动态注入DOM：

内联StyleSheet

动态创建元素并将其附加到

中部分：

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

外部样式表

使用 jQuery 的 $.get() 方法加载外部 CSS 文件：

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

动态创建标签

创建一个动态元素并将其附加到

中部分：

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

动态创建 with @import

在动态创建的

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

支持的浏览器

动态添加时，Internet Explorer 将评估内联 CSS，但 Chrome 需要使用 @import 来评估外部 CSS。 Firefox 对动态 CSS 注入的支持可能会因版本而异。

以上是如何使用 jQuery 动态加载内联或外部 CSS？的详细内容。更多信息请关注PHP中文网其他相关文章！