CSS不适用于在javascript中创建的html元素_Javascript_Html_Css

CSS不适用于在javascript中创建的html元素

javascript html css

CSS不适用于在javascript中创建的html元素,javascript,html,css,Javascript,Html,Css,我有一个包含html内容的脚本。这个脚本来自一个外部网站，它包含动态的html内容，因为它由rss提要填充。这是剧本要查看内容，请将此链接放到浏览器中，其内容完全相同脚本的工作原理为了在前端显示html内容，必须将脚本标记环绕在html标记周围，例如如下所示 <div>http://feed.informer.com/widgets/J9HBCBNMTQ.js</div> 但是我的css不起作用。当我在dev-tools-inspect元素中执行此操作时，它工

我有一个包含html内容的脚本。这个脚本来自一个外部网站，它包含动态的html内容，因为它由rss提要填充。这是剧本

要查看内容，请将此链接放到浏览器中，其内容完全相同

脚本的工作原理

为了在前端显示html内容，必须将脚本标记环绕在html标记周围，例如如下所示

<div>http://feed.informer.com/widgets/J9HBCBNMTQ.js</div>

但是我的css不起作用。当我在dev-tools-inspect元素中执行此操作时，它工作得很好，但是当我将样式表与该css链接时，它就不起作用了，即使在同一html页面上使用css也不起作用。当我在dev工具中检查css时，它并没有隐藏四个元素，只显示一个，而是显示了所有元素，根本并没有css代码，就像它并没有被发现一样

我强调，#text1，#text2等div不在上面的代码中，它们是SCRIPT标签中HTML内容的一部分。

我甚至不敢相信location.replace（'javascript:page'+page+'（）'）有效，但我只是将css移到返回的HTML中，图像被隐藏了

function page1() {
    return "<html><head><style>.heraldone #text2,.heraldone #text3,.heraldone #text4,.heraldone #text5 {display: none;}</style></head><body class='heraldone'><script src='http://feed.informer.com/widgets/J9HBCBNMTQ.js'><\/script><\/body><\/html>";
}

function page2() {
    return '<html><body>Hello world (2)</body></html>';
}

function nextpage(page) {
    if (!document.image) {
        location.replace('javascript:page' + page + '()');
    } else {
        location.href = 'javascript:page' + page + '()';
    }
}

函数第1页（）{
return“.heraldone#text2、.heraldone#text3、.heraldone#text4、.heraldone#text5{display:none；}”；
}
函数第2页（）{
返回“Hello world（2）”；
}
功能下一页（第页）{
如果（！document.image）{
replace（'javascript:page'+page+'（）'）；
}否则{
location.href='javascript:page'+page+'（）'；
}
}

我不知道你在干什么，但我会选择替换掉html主页的主体内容，而不是任何黑暗的魔法，让它能够按预期工作。这样做的好处是使返回的页面html更小，更容易理解。类似于

var页面=[''，'Hello world']；document.getElementsByTagName（'body'）[0].innerHTML=pages[page-1]
顶部列出的样式（#text2-…5）不在该javascript中。其中唯一适用于这些文本元素的样式是
#text3{z-index:2；位置：绝对；边距顶部：50%；}

因此，我想，您必须在引用的js文件中包含这些样式，因为它们不在任何地方。
这非常令人困惑，CSS似乎与HTML或javascript？中的任何内容都不匹配。body class=“heraldone”>feed.informer.com/widgets/J9HBCBNMTQ.js“>，文本1，#文本2，#文本3，#文本4，#文本5。如果脚本标记中有div，那么这个脚本标记包含来自外部源@adeneoi的html内容，我看不到您的css被加载到page1方法中，我甚至不知道这是否可行。这难道不只是在单击时清空整个页面，然后尝试运行一个不存在的方法吗？@Scottux它可以工作，只有css不能发布加载的其中一个文件的html内容以及加载后页面的html@Scottux这正是我需要的！现在它工作得很好。非常感谢。这是一个相当讨厌的方法，但是如果使用内嵌样式的作品，你的问题可能是在你原来的方法上应用了其他CSS。（由于直列样式是最优先的）@DBS完全同意。我还添加了一个替代解决方案。这不是串联样式。它是html页面中嵌入的样式表，是javascript函数清除原始文档的结果。内联样式类似于
我想做的主要事情是通过Javascript将的脚本内容加载到DOM中，而不是将其与html文件放在一个div中，这是我用有限的Javascript知识使其工作的唯一方法@“斯科特，他们在这里，”约翰尼斯说。feed.informer.com/widgets/J9HBCBNMTQ.js正如我一直说的那样。我不明白为什么这篇文章在代码有效且答案有效的情况下一直被否决，人们有什么问题？打开该文件并使用“#text”的find函数，它应该可以找到所有这些样式。你唯一能找到的就是我上面引用的#text3规则
<input type="button" value="Next page 1" onClick="nextpage(1)">
<input type="button" value="Next page 2" onClick="nextpage(2)">

.heraldone #text2 {
display: none;
}

.heraldone #text3 {
display: none;
}

.heraldone #text4 {
display: none;
}

.heraldone #text5 {
display: none;
}

function page1() {
    return "<html><head><style>.heraldone #text2,.heraldone #text3,.heraldone #text4,.heraldone #text5 {display: none;}</style></head><body class='heraldone'><script src='http://feed.informer.com/widgets/J9HBCBNMTQ.js'><\/script><\/body><\/html>";
}

function page2() {
    return '<html><body>Hello world (2)</body></html>';
}

function nextpage(page) {
    if (!document.image) {
        location.replace('javascript:page' + page + '()');
    } else {
        location.href = 'javascript:page' + page + '()';
    }
}