以編程方式分析CSS佈局

我想要蜘蛛幾個博客並以編程方式分析他們的基於html和css的佈局以查看例如如果側邊欄位於主要內容的左側或右側，則有多少列，以及它們的寬度。以編程方式分析CSS佈局

我該如何做到最好？我可以使用任何工具或庫嗎？

（我寧願用Python或PHP的解決方案。）

2011-02-16 Christian Davén

這聽起來很難籠統做到這一點。你可能會因爲只檢查博客的約束而受到幫助，因爲可能會有一些統一性 - 例如，他們正在使用已知的模板。 – thirtydot 2011-02-16 11:00:14

看起來這可以通過PhantomJS來實現，通過一段JavaScript是這樣的：

phantom.viewportSize = { width: 1024, height: 768 }; 

var page = new WebPage(); 

page.open("http://mashable.com/", function(status) { 
    if (status === "success") 
    { 
     page.includeJs("https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js", function() { 
      var position = page.evaluate(function() { 
       return jQuery('#sidebar').position(); 
      }); 

      // Now position.left and position.top contains the 
      // position of the #sidebar element. Use other 
      // jQuery functions to calculate the relative position. 

      phantom.exit(); 
     }); 
    } 
});

來源

2011-08-03 12:23:33

你是在找這個嗎？

http://cthedot.de/cssutils/

這是在谷歌搜索先打。至少有四個人看起來很有希望。也許你應該嘗試谷歌，列出你發現的東西，並要求具體包裝的具體建議。

來源

2011-02-16 11:02:44

現在看起來不錯。 :)但是，這個解析器是否真的能夠計算出元素的最終位置？我不確定，因爲這需要渲染整個文檔並預測文檔的流程。無論如何，對大多數情況來說，這可能已經足夠了 – 2011-02-16 11:10:19

你搜索了什麼？我找不到那個。無論如何，解析CSS只是一個步驟。 – 2011-02-16 11:13:15

這聽起來像使用純粹的服務器端CSS和HTML解析非常困難的任務 - 你將不得不重新創建瀏覽器的渲染引擎以獲得可靠的結果。

根據你需要這個什麼，我能想到的方式沿着這些線路的地方：

取使用類似wget頁和樣式表與--page-requisites
然後：
- 使用像Selenium這樣的工具瀏覽每個下載的頁面，搜索元素名稱並輸出它們的位置（如果在Selenium中可能的話）。我認爲它是，但我不知道肯定）
- 創建一塊jQuery，你注入到每個下載的頁面。 jQuery搜索名爲「側邊欄」，「工具欄」等的元素，獲取它們的位置，將結果保存到本地AJAX代碼片段，然後繼續到下一個下載的頁面。您只需要在瀏覽器中打開第一頁，剩下的就會自動發生。不是微不足道的實施，但可能。

如果你可以使用一個客戶端應用程序平臺.NET一樣，你可能更容易放棄建設，包含了瀏覽器控制，其DOM可以比只使用jQuery的更自由地訪問自定義應用程序。

來源

2011-02-16 11:03:42

以編程方式分析CSS佈局

回答

相關問題