javascript - 单击 href 链接后如何动态添加 css 到 head

Question

使用 Javascript 从 index 页面单击 href 链接后，将页面重定向到 test.php 后，是否可以将 css 样式表导入到 test.php 头？如果可以的话，该怎么办呢？

问题是 styles.css 无法正常工作或在 test.php 页面中显示？

我有这样的代码:

索引页

<a id="some_id" class="optional_has_click">Click Me</a>

Jquery

<script type="text/javascript">
$(document).ready(function(){

$("#some_id").click(function(){

 // add dynamically css file from external link and display to head
 window.location.href = 'test.php'; 

var cssId = 'styles'; 
var head  = document.getElementsByTagName('head')[0];
var link  = document.createElement('link');
link.id   = cssId;
link.rel  = 'stylesheet';
link.type = 'text/css';
link.href = 'http://example.com/styles.css';
link.media = 'all';
head.appendChild(link);

document.write("<style>#jstree-marker-line, 
#preloader{ background:none !important}</style>");

});

});
</script>

测试页

<div id="container">

<p>test</p>

</div>

Answer 1

页面加载后，您不能使用 document.write，但如果您确实想将这样的样式添加到页面的头部，您可以尝试这样的操作:

$("head").append("<style>...</style>");

但是，当您想要更新页面上的样式时，最好这样做

$("#jstree-marker-line").css("background", "none");

或者你可以有一个类，其中包含你需要在页面上定义的样式，并使用 jquery 的 addClass单击时动态添加该类