Div 元素在屏幕中的位置 - C#

简介

在 Web 开发中，我们经常需要通过代码获取元素在浏览器中的位置信息。而 div 元素则是最常用的容器元素之一，我们经常需要获取它在屏幕中的位置，进行一些动态交互等操作。

本篇介绍如何使用 C# 获取 div 元素在屏幕中的位置信息。

实现方法

1. 使用 JavaScript 获取位置信息

我们可以通过调用 JavaScript 代码获取 div 元素在屏幕中的位置信息，然后将其传递给 C# 应用程序。

以下是获取 div 元素位置信息的 JavaScript 代码：

var element = document.getElementById("divId");
var rect = element.getBoundingClientRect();
var x = rect.left + window.pageXOffset;
var y = rect.top + window.pageYOffset;

然后，我们可以使用 C# 的 WebBrowser 控件，将 JavaScript 代码注入到浏览器中，并从返回的结果中提取位置信息。以下是一个简单的示例：

using System.Windows.Forms;
using System.Text.RegularExpressions;

public static class WebBrowserExtensions
{
    public static Rectangle GetElementBounds(this WebBrowser browser, string elementId)
    {
        var script = string.Format(
            "var element = document.getElementById('{0}');" +
            "var rect = element.getBoundingClientRect();" +
            "return '{{left:{1},top:{2},width:{3},height:{4}}';",
            elementId,
            "rect.left + window.pageXOffset",
            "rect.top + window.pageYOffset",
            "rect.width",
            "rect.height");

        var result = browser.Document.InvokeScript("eval", new object[] { script });
        var match = Regex.Match(result.ToString(), "\\{.+\\}");
        var values = match.Value.Split(',')
            .Select(x => int.Parse(Regex.Match(x, "\\d+").Value))
            .ToArray();

        return new Rectangle(values[0], values[1], values[2], values[3]);
    }
}

使用示例：

var browser = new WebBrowser();
browser.Navigate("https://www.google.com");
browser.DocumentCompleted += (s, e) =>
{
    var bounds = browser.GetElementBounds("lst-ib");
    Console.WriteLine("Left: {0}, Top: {1}, Width: {2}, Height: {3}",
        bounds.Left, bounds.Top, bounds.Width, bounds.Height);
};

2. 使用 CSS 选择器获取位置信息

如果我们不想使用 JavaScript 代码，我们可以使用 Selenium WebDriver 或其他类似工具来获取位置信息。

以下是使用 Selenium WebDriver 获取 div 元素在屏幕中的位置信息的示例：

using OpenQA.Selenium;
using OpenQA.Selenium.Chrome;

var options = new ChromeOptions();
options.AddArgument("--headless");
var driver = new ChromeDriver(options);

driver.Navigate().GoToUrl("https://www.google.com");
var element = driver.FindElement(By.CssSelector("input[name='q']"));
var location = element.Location;
var size = element.Size;

driver.Quit();

Console.WriteLine("Left: {0}, Top: {1}, Width: {2}, Height: {3}",
    location.X, location.Y, size.Width, size.Height);

总结

以上是获取 div 元素在屏幕中的位置信息的两种方法：使用 JavaScript 代码以及使用 Selenium WebDriver。根据具体应用场景和需求进行选择。