CSS不適用於在javascript中創建的html元素

-5

我有一個包含html內容的腳本。該腳本來自外部網站，它包含動態的html內容，因爲它由rss提要填充。這是劇本。 http://feed.informer.com/widgets/J9HBCBNMTQ.js CSS不適用於在javascript中創建的html元素

查看其內容，把這個鏈接到瀏覽器，它的內容完全一致

http://feed.informer.com/widgets/J9HBCBNMTQ.html

如何腳本工作

爲了顯示在前端的html內容，你必須圍繞html標籤包裝腳本標籤，例如這樣。

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

發行

因爲我要保持我的html頁面免費上百個腳本的，而不是在HTML文件中有它，我希望把它在將被鏈接到一個js文件html文件。基本上使用JavaScript來注入已包裝在body標籤中的腳本，創建一個頁面，而不必創建額外的html文件。

什麼，我需要的夏日

1）的JavaScript注入腳本到DOM已經包裹在或身體標籤（或任何HTML標籤）

2）的JavaScript創建點擊一個按鈕的網頁或元素，我將使用不同的腳本代替創建大量html文件

如下所示。我使用JavaScript來恢復已經裹在身上帶類.heraldone腳本點擊輸入按鈕時

function page1() { 
    return '<html><body class="heraldone"><script type="text/javascript" 
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 + '()'; 
    } 
}

HTML

<input type="button" value="Next page 1" onClick="nextpage(1)"> 
<input type="button" value="Next page 2" onClick="nextpage(2)">

所有這一切都符合上述代碼工作無論其

在這個腳本標籤是5個div，分別指定＃text1，＃text2，＃text3，＃text4，＃text5。

這些DIVS不在上面的代碼中，它們是腳本標籤內容的一部分。

我試圖隱藏這些div中的四個，當腳本的內容在from視圖中呈現時，使用css。例如：

.heraldone #text2 { 
display: none; 
} 

.heraldone #text3 { 
display: none; 
} 

.heraldone #text4 { 
display: none; 
} 

.heraldone #text5 { 
display: none; 
}

但我的CSS不工作。當我在開發工具inspect元素中使用它時，它工作的很好，但是當我將樣式表與該css鏈接時，它無法工作，即使在同一個html頁面上有css也無法正常工作。與其隱藏四個元素並僅顯示一個，它顯示了所有的，當我檢查開發工具中的CSS時，根本沒有任何CSS代碼，就像它沒有被拾起一樣。有什麼想法？

我強調＃text1，＃text2等DIVS不在上面的代碼中，它們是腳本標記中HTML內容的一部分。

來源

2015-12-19 Shingai Munyuki

這很混亂，CSS似乎不匹配HTML或JavaScript中的任何內容？ – adeneo

真的不清楚... – Vixed

。heraldone是這樣的。 body class =「heraldone」> ，＃text1，＃text2，＃text3 ，＃text4，＃text5。是divs WITHIN腳本標記，這個腳本標記有來自外部源的html內容@ adeneo –

我什至不能相信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 + '()'; 
    } 
}

不知道你是到什麼，但我會選擇更換了主HTML頁面的主體內容，而不是什麼黑魔法被允許按預期這甚至工作。這將有利於保持返回的頁面html更小，並且更容易遵循。類似於var pages = ['<script ... />','Hello world']; document.getElementsByTagName('body')[0].innerHTML = pages[page-1];

來源

2015-12-19 16:46:37 Scottux

就是這樣！ @Scottux正是我所需要的！現在它的工作很完美。非常感謝你。 –

這是一個相當討厭的方法，但如果使用內嵌式風格工作，那麼您的問題就是其他一些CSS正在應用於原始方法。（因爲線內款式是最重要的） – DBS

@DBS完全同意。我還添加了一個替代解決方案。 – Scottux

您在頂部列出的那些樣式（＃text2 - ... 5）在該javascript中是而不是。在那裏唯一的風格，適用於任何那些#text元素是

#text3 {z-index: 2;position:absolute; margin-top: 50%;}

所以你必須包括那些引用的JS文件的風格，我想，因爲他們沒有在任何地方。

來源

2015-12-19 17:50:47 Johannes

他們在這裏，@Johanness。 feed.informer.com/widgets/J9HBCBNMTQ.js正如我一直說的。 –

我不明白爲什麼這個職位繼續被拒絕時代碼的作品和答案的作品，什麼是問題的人？ –

打開該文件並使用「#text」的查找功能，該功能應該可以找到所有這些樣式。你會發現唯一的東西是我上面引用的#text3'rule – Johannes

CSS不適用於在javascript中創建的html元素

回答

相關問題