Extrating嵌入式款式的HTML頁面用jQuery

Question

所以，這裏的問題...

我必須：

1. 抓鬥的html頁面通過REST API用AJAX調用，
2. 提取一表從HTML已知ID（其中，值得慶幸的是，良好形成）
3. 提取從樣式塊表相關的CSS，
4. 附加表到一個div我的網頁上，並
5. 重新申請原來的CSS

因此，網頁的，我很感興趣的部分是：

<style> 
#tableid td.someclass { 
    ... 
    } 
#tableid td.anotherclass { 
    ... 
    } 
[etc etc ..] 
</style> 

而且

<table id="tableid"> 
... 
</table> 

因此，通過上面的列表中去1,2 & 4完全沒有問題。這是3和5是大腦徵稅 - 有沒有外部樣式表擔心順便說一句，一切都在我抓住一個標籤內的頁面。

我想我可以提取整個元素，然後將其附加到我的頁面 - 但這是混亂的，可能會導致不必要的副作用。我想要做的只是提取適用於#tableid的樣式，然後將它們附加到我的div上。

有沒有一種優雅的方式來做到這一點？

Answer 1

你可以使用標準的jQuery取景器拉頭中的樣式：

var styles = $('head style').text(); 

然後對其運行正則表達式：

var tableID  = 'tableid', 
    pattern  = new RegExp('#'+ tableID + '[^}]+}', 'g'), 
    tableStyles = styles.match(pattern); 

這應該給你的風格的數組，你表的ID。現在，你可以在這些樣式應用到當前文檔的頭：

$('<style/>', { text: tableStyles.join('\n') }).appendTo('head'); 

你的使用情況可能需要一些微調，但是這應該大約給你什麼你之後。