试图覆盖CSS..但它在PHP iframe中?

Question

我希望在下面注入/覆盖一些CSS代码：

<script type="text/javascript">
feed2js_ck = true;
document.write('<div class="rss-box" style="color: #414141; font-family: Arial, sans-serif; font- 
size: 14px; font-weight: bold; text-align: center;">');
document.write('<p class="rss-item"><br />');
document.write('<span class="rss-date" >All systems are operational at this time.</span>');
document.write('</p>');
document.write('</div>');
</script>

我目前有以下内容：

var style = document.createElement( 'link' );
style.rel = 'stylesheet';
style.type = 'text/javascript';
style.href = chrome.extension.getURL( '/themes/darkTheme/status.php' );
( document.head || document.documentElement ).appendChild( style );
var logoURL = chrome.extension.getURL( "/status.php" );

但是，它目前不起作用...我认为我以错误的方式处理这个问题，我为这个问题道歉。

非常感谢您的帮助！

Answer 1

如果不更好地了解您要实现的目标，就很难回答问题的CSS部分。当我更清楚地了解您的 CSS 目标是什么时，我将扩展这个答案。

与此同时，如果你能避免它，你真的不应该在你的javascript中使用document.write - 这是一种非常古老的方法，它的性能不高，并且会引发各种问题。

相反，您可以构建一个DocumentFragment并将其附加到您的文档中：

// CREATE THE FRAGMENT
let rssFragment = document.createDocumentFragment();
// CREATE .rss-box
let rssBox = document.createElement('div');
rssBox.classList.add('rss-box');
// CREATE .rss-item
let rssItem = document.createElement('p');
rssItem.classList.add('rss-item');
// CREATE .rss-date
let rssDate = document.createElement('span');
rssDate.classList.add('rss-date');
rssDate.textContent = 'All systems are operational at this time.'
// BUILD THE FRAGMENT
rssItem.appendChild(rssDate); // Puts rssDate into rssItem
rssBox.appendChild(rssItem); // Puts rssItem into rssBox
rssFragment.appendChild(rssBox); // Puts rssBox into rssFragment
// ADD THE FRAGMENT TO THE DOCUMENT
document.body.appendChild(rssFragment);