当前位置: 首页 > 知识库问答 >
问题:

动态加载的CSS在Windows 8应用程序中无效

臧翰采
2023-03-14

我已经动态加载了一个CSS文件,并将其放置在Windows8应用程序的style标记中。

下面是我加载CSS的方法

function loadHeaders() {
    var monobookCSSURL = "http://lego.wikia.com/wiki/MediaWiki:Monobook.css?action=raw&ctype=text/css";

    WinJS.xhr({ url: monobookCSSURL }).then(loadCSS, xhrError);
}

function loadCSS(result) {
    var css = result.responseText;

    var style = document.createElement("style");
    style.innerText = css;

    document.getElementsByTagName("head")[0].appendChild(style);
}

当我在Visual Studio中使用DOM Explorer查看加载的内容时,我看到的正是我所期望的,head中的最后一个标记是包含CSS的style

但是,当我查看我的页面时,加载的CSS不会产生影响。

我通过在HTML源代码中手动添加另一个style标记来测试这一点,这起了作用,但动态标记没有作用。

我怎样才能让这个CSS产生效果呢?

下面是生成的样式标记:


 #p-cactions ul li {
}
#p-cactions ul li a {
}
 #content {
}
 body {
    background: rgb(244, 248, 255);
}
 div.tleft {
    border: currentColor;
}
 div.tright {
    margin-left: 13px;
}
 .content-bg {
    background: white;
}
pre {
    overflow: auto;
}
.pBody {
    background-color: rgb(222, 227, 232);
}
body {
     background: #103A5A url(http://images2.wikia.nocookie.net/lego/images/f/f0/Studs-tile.png);
}
#p-personal li a {
     color: #DEE3E8;
}
.portlet h5 {
     color: #FFFFFF;  display: block;  height: 15px;  background-color: #355C70;  text-transform: Capitalize;
}
body[class*='ns-118'] {
}
body[class*='ns-119'] {
}
body[class*='ns-118'] #p-personal li a {
     color: #DEE8E3;
}
body[class*='ns-119'] #p-personal li a {
     color: #DEE8E3;
}
body[class*='ns-118'].portlet h5 {
     color: #FFFFFF;  display: block;  height: 15px;  background-color: #35705C;  text-transform: Capitalize;
}
body[class*='ns-119'].portlet h5 {
     color: #FFFFFF;  display: block;  height: 15px;  background-color: #35705C;  text-transform: Capitalize;
}
body[class*='ns-116'] {
}
body[class*='ns-117'] {
}
body[class*='ns-116'] #p-personal li a {
     color: #E8DEE3;
}
body[class*='ns-117'] #p-personal li a {
     color: #E8DEE3;
}
body[class*='ns-116'].portlet h5 {
     color: #FFFFFF;  display: block;  height: 15px;  background-color: #90152C;  text-transform: Capitalize;
}
body[class*='ns-117'].portlet h5 {
     color: #FFFFFF;  display: block;  height: 15px;  background-color: #90152C;  text-transform: Capitalize;
}
body[class*='Forum_Brickiforums'] {
}
body[class*='Forum_Brickiforums'] #p-personal li a {
     color: #E8DEE3;
}
body[class*='Forum_Brickiforums'].portlet h5 {
     color: #FFFFFF;  display: block;  height: 15px;  background-color: #B0B02C;  text-transform: Capitalize;
}
#title-rating2 {
     display: none;
}
#footer {
     background: #DEE3E8;  border-color: #355C70;
}
.wikiaOnly {
     display: none;
}
div.User-help-badge-1 {
    left: 500px; top: 2px; position: absolute;
}
div.User-help-badge-2 {
    left: 540px; top: 2px; position: absolute;
}
div.User-help-badge-3 {
    left: 580px; top: 2px; position: absolute;
}
div.User-help-badge-4 {
    left: 620px; top: 2px; position: absolute;
}
div.User-help-badge-5 {
    left: 660px; top: 2px; position: absolute;
}
.infoboxtoc .toc {
    margin: 0px; padding: 0px; border: currentColor; width: 100%;
}
.infoboxtoc #toctitle {
    display: none;
}
.infoboxtoc .NavHead {
    padding-right: 2px; padding-bottom: 12px; float: right;
}
.infoboxtoc .NavFrame {
    margin-bottom: -23px;
}
.ttbutton {
    border-radius: 2px; left: 114px; top: 200px; padding-right: 5px; padding-left: 5px; display: none; position: fixed; transform: rotate(90deg); background-color: rgb(173, 173, 173); -moz-transform: rotate(90deg); -webkit-transform: rotate(90deg); -o-transform: rotate(90deg);
}
.wikia-menu-button {
    display: none !important;
}
:first-of-type.portlet > .pBody > ul > li:not([id]) {
    display: none !important;
}

共有1个答案

吕衡
2023-03-14

不是修改head标记,而是通过DOM API进行修改。这一页应该会有帮助。

 类似资料:
  • 如何在Vue.js应用程序中动态加载JavaScript脚本? 以下是一个简单的解决方案: 但是第一行不加载脚本(它不向HTML添加元素)。 第二行是有效的。第二行是相同的,只是将app变量替换为纯文本(

  • 问题内容: 我正在尝试为我的网站创建页面主题功能。我想使用单独的CSS文件在页面上动态加载相应的主题。 我正在使用此代码: 效果很好,但是如果CSS文件未加载,它不会返回任何信息。 加载时,有什么方法可以捕捉吗?也许通过使用ajax? 问题答案: 加载CSS文件(或其任何其他更改)时,Internet Explorer会触发一个事件。其他浏览器不会触发任何事件,因此您将必须手动检查样式表是否已加载

  • 问题内容: 是否可以在运行时加载特定的程序包?我想要一种插件,每个插件具有与其他插件相同的功能,但行为不同,并根据配置文件加载一个或另一个。 问题答案: 您可能会考虑在运行时执行“插件”程序包,方法是编写一个新程序(例如到temp目录),然后通过exec.Command执行,类似于 您将在此处看到一些类似的代码。

  • 这是我的第一个问题。我一路寻找,尝试了很多,但没有得到我想做的。问题是:我有一个应用程序使用SoundPool播放声音,仅此而已。但是要加载的东西很多(>50),一个一个加载需要时间。看一看; @Override公共视图onCreateView(LayoutInflater inflater,ViewGroup container,Bundle savedInstanceState){View V

  • 我正在处理一个Spring Boot应用程序,其中我使用该应用程序公开SOAP WebService。我在Spring boot应用程序中使用Apache CFX framework for SOAP impl。我正在使用基于注释的方法。 我在一个bean中的Spring Boot配置文件中设置应用程序上下文时遇到了问题。下面是我的代码。 配置文件如下所示。 现在我有了bean SOAPproce

  • 我试图集成一个旧的weblogic应用程序来使用Okta SSO saml2.0流。我已经成功地使用@ServletCompenentScan将应用程序与Spring Boot集成,并且能够成功地使用Spring Security性进行基本身份验证。但是,当将特定于SAML的配置添加到SecurityConfiguration时,应用会在部署时失败。对于okta saml,我遵循这个教程https