Question

我目前正在尝试将一些CSS文件加载到已经由浏览器加载和呈现的页面中，并将其样式应用到页面而不重新加载它。

我无法对原始页面进行太多修改，因此必须在以后使用JavaScript将CSS链接/包含在html中。我尝试在标题中添加引用CSS文件的<link>元素，并添加<style>与CSS本身。

html的修改工作正常，但页面的布局根本不受影响。可能是因为浏览器此时没有重新呈现页面？

我在这里看到一些答案，表明它会像上面描述的那样起作用，但对我来说它什么也没做。这可能是什么原因？

根据要求，我正在使用一些JavaScript来更新页面的HTML。两种方式都可以正常工作，元素会添加到页面中。所以我认为这个错误存在于其他地方。

1。）通过从文件中读取XHR来添加实际的CSS：

var promptCSS= document.createElement('style'); 
promptCSS.type="text/css";
var cssPromptFileSelectStyleURL= 'promptFileSelectStyle.css';
//add css of prompt into current page html
var cssFile = new XMLHttpRequest();
    cssFile.open("GET",cssPromptFileSelectStyleURL,true);
    cssFile.send();

 cssFile.onreadystatechange =       function(){

if (cssFile.readyState== 4 && cssFile.status == 200){
promptCSS.innerHTML=cssFile.responseText;
}};


var head=document.querySelectorAll("head")[0];
head.appendChild(promptCSS);

2。）添加<link>引用CSS文件

var promptCSS= document.createElement('link');
promptCSS.rel = 'stylesheet';
promptCSS.type = 'text/css';
promptCSS.href = 'promptFileSelectStyle.css';
var head=document.querySelectorAll("head")[0];
head.appendChild(promptCSS);

Answer 1

内联CSS不是在<script>代码之间设置的，而是在<style>代码之间设置的。

此外，还有一个测试您的方法的小提琴：https://jsfiddle.net/sLpfLsLc/

在加载包含

的新CSS文件之前等待2秒

*{
  background: red;
}

如你所见，它运作正常！

Answer 2

也许这会指出你正确的方向。我不是100％肯定我明白你需要什么。因此，如果是这种情况，您可以尝试在需要时附加带有css文件URL的链接标记。例如，当您滚动X高度或发生单击或其他任何操作时，您可以触发该脚本。对于这种情况，我每隔2秒向头部附加一个样式标签然后将其删除，这样它就不会每2秒追加一次。你可以做<link rel="stylesheet" type="text/css" href="promptFileSelectStyle.css"/>而不是风格希望这会有所帮助。

function remover(){
	$(".style-tag").remove();
}

function x(){
    var style = $('<style class="style-tag">.columns {justify-content: space-around;} </style>');
  $('html > head').append(style);
  $(".parent").toggleClass("columns");
    
}

$(document).ready(function(){
setInterval(function(){
remover();
x();
}, 2000);
});

.parent{
  display:flex;
  justify-content: center;
  flex-wrap: wrap;
  width: 100%;
  
}
.box{
  background: red;
  border: 1px solid black;
 width: 100px;
 text-align: center;
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
  <div class="box">content</div>
  <div class="box">content</div>
  <div class="box">content</div>
  <div class="box">content</div>
  <div class="box">content</div>
</div>

通过使用js加载css样式表来更新已呈现的网页的样式

2 个答案: