突出显示html中的任意元素 [英] Highlight arbitrary elements in html

问题描述

我正在开发一个桌面软件应用程序，它可以查找网页中的错误并在浏览器中突出显示它们。突出显示的区域有些武断。它们可以是ap标签，整个标签或img中的一个单词。

I'm developing a desktop software application which looks for errors in web pages and can highlight them in the browser. Highlighted areas are somewhat arbitrary. They could be one word in a p tag, an entire a tag or an img.

在过去，我通过重写html并添加样式化span标签来完成此操作突出显示的区域。不利的一面是，经常会突出显示亮点。例如，如果图像的尺寸正好与没有溢出的大小相同，则任何应用的边框，背景等都将被遮盖。

In the past I've done this by rewriting the html and adding styled span tags around the highlighted area. The downside is that quite often the highlights can be obscured. For example where in image is in a div exactly its size with no overflow, any applied border, background etc. will be obscured.

解决此问题的最佳方法是什么？在流行的软件/网络应用程序中是否有这样的好例子？

What's the best way to approach this? Are there any good examples of this being done in popular software / webapps?

限制：我不能使用JS（文件是本地的，浏览器经常阻止它）。但我可以使用最新的标准。输出不需要验证，只要它在普通的现代浏览器上运行。

Limitations: I can't use JS (files are local and browsers often block this). I can however user the latest standards. The output doesn't have to validate, as long as it works on common modern browsers.

推荐答案

由于背景颜色和边框可以不会被使用，我认为你需要在有问题的元素或文本上放置一些东西。也许你可以使用具有部分透明背景的绝对或固定位置< div> 元素。

Since background colors and borders can't be used, I think you'll need to place something on top of the offending element or text. Perhaps you can use an absolute or fixed position <div> element with a partially transparent background.

，这可能会让坐标变得棘手。但是你也许可以用同样的东西来处理跨度，并在其中添加一些虚拟元素，从而使其认为0,0就是你的span元素所在。

Of course, this could get tricky with getting the coordinates. But you might be able to use the same thing you used to do with the span and add some dummy elements within it to trick it into thinking that 0,0 is right where your span element is.

这篇关于突出显示html中的任意元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！