使用Delphi编辑CSS

Question

我使用Delphi 2010。我正在使用twebbrowser加载HTML源并查看它。 现在，我想在Web浏览器中单击某个区域（背景、链接等），并获取样式HTML所使用的CSS文件中的样式。

例如：我单击H3区域，然后想要跳转到CSS中的h3{ color: white; }。 非常感谢任何帮助；这对我来说很难理解。

- Grant

---

欢迎来到Stack Overflow。您是否已经确定了这个所谓的“编辑”功能需要完成的不同步骤？（例如，您知道如何识别“H3区域”吗？您能检测到那里的点击吗？您是否有文档中所有CSS规则的列表？您知道如何找出哪些适用于被单击的给定区域的规则吗？）您遇到了哪个部分的问题？提出更具体的问题（或者在这种情况下实际上是任何问题）将为您获得更好的答案。仅仅请求“任何帮助”并不是Stack Overflow设计的类型。 - Rob Kennedy

如果您只对查看HTML元素的属性感兴趣，我建议您安装带有Web开发者插件的Firefox浏览器。然后，您可以使用“查看样式信息”（Ctrl+Shift+Y）来查看相应的CSS信息。 - The_Fox

Answer 1

您需要自己处理源代码的解析才能使其工作。因为CSS条目可以在另一个文件甚至多个文件中，所以这可能有些棘手。我建议先查看DIHtmlParser组件，它可以在这方面提供很大的帮助。您需要解析主文档和每个已确定的CSS文件，以定位要跳转到的正确文件/位置。我还建议查看tEmbeddedWB，作为TWebBrowser的替代品，因为它提供了更多嵌入式浏览器的控制，以及TRichEditWB，用于查看语法高亮的HTML源代码。

编辑：您仍然需要解析CSS和HTML以构建每个标记及其CSS位置的索引。当您编辑HTML时，您需要解析当前光标所在或所在的标记，将其与之前解析的索引进行比较，以显示生效的CSS属性。请记住，CSS会级联和嵌套，因此您的索引很可能是一个树形结构，并且您的标记将相对于该树形结构。

- skamradt

---

感谢您的评论。 我已经查看了DlHtmlParser，以及tEmbeddedWB和TRichEditWb。 但是我无法找到解决我正在尝试做的事情的方法。 - Grant

我最困扰的是找出在twebbrowser中点击的位置（h3、Body等）。有人知道怎么做吗？ 谢谢。 - Grant

我自己正在使用DIHtmlParser，并且非常喜欢它。不幸的是，对于在Web浏览器中单击并标识所单击的特定情况，我无法提供任何帮助。 - Jerry Dodge