以编程方式分析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布局

回答

相关问题