javascript - dom 不支持以编程方式添加的样式表元素

标签 javascript jquery css

在我们的网络应用程序中,我试图访问我们的服务器以确定他们是否对网络应用程序的布局进行了任何自定义 CSS 调整。在得到一个 bool 标志后,我从服务器返回 CSS 并在最后一个之后注入(inject)一个新的 head link ...

问题是,这并没有更新页面的样式或布局。如果我进入页面元素的来源并在开发控制台中单击该 CSS 文档,我可以通过简单地更改样式引用的值来强制它“注意到”此 css 可用。

这是我用来注入(inject) CSS 的 jquery:

$("head link[rel='stylesheet']").last().after("<link rel='stylesheet' href='4DACTION/WEB_Mobile_CustomCSS' type='text/css' media='screen'>");

知道为什么在我在调试器中对其进行更改之前它不会强制页面使用它吗?

最佳答案

我使用 Bootstrap 创建了一个示例,它完全按照您在 setTimeout 回调中使用您的代码所描述的方式进行:

setTimeout(function () {
    $("head link[rel='stylesheet']").last().after("<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css' type='text/css' media='screen'>");
}, 1000);

查看:http://jsfiddle.net/v089p29a/它从平面按钮切换到 3D 按钮。

我不确定为什么这对您不起作用。也许您的网址无效,例如 adeneo建议。还要确保将代码放在 $(window).load()$(document).ready() 事件处理程序中,以确保 DOM 已准备好被操纵。

关于javascript - dom 不支持以编程方式添加的样式表元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26147604/

相关文章:

javascript - 按钮 Bootstrap 的选中状态

html - 对于移动网站,我的图片应该是多大的

javascript - 将 img src 存储在 JavaScript 变量中

jquery - div下的mouseover和mouseout函数

javascript - CSS/Jquery - 在移动设备/选项卡上查看时的导航下拉菜单

javascript - 为div附加点击事件

javascript - 有没有办法在 pwa 中安排离线通知?

javascript - Webpack 错误 : You may need an appropriate loader to handle this file type. | @字符集 "UTF-8";

Javascript Moment.js 添加到最新日期(每月两次)

html - 带有 clipPath 的 WebKit CSS3 转换和 SVG foreignObject 溢出