1

如果我有一个 img 列表，如何获得 clientwidth 和 clientheight

imgs = document.findElements(By.cssSelector("a>img"));
for(DOMElemnt img:imgs){
double height =img.getAttribute("height");//not always works ,sometime return null value
//What API can I use?
}

还是我应该使用 jquery？但是它如何与 jxbrowser API 结合呢？谢谢！

4

1 回答 1

1

据我所知，没有用于获取元素height或width直接获取元素的 API。我给出了两种获取height和的方法width。使用与您的代码匹配的每个。

  1. 如果有一些属性将图像彼此分开，例如id，那么您可以获取图像width和height使用.executeJavaScriptAndReturnValue方法：

    for(DOMElemnt img : imgs){
    JSValue res = browser.executeJavaScriptAndReturnValue(
                    "["
                  + "document.getElementById('" + img.getAttribute("id") + "').width,"
                  + "document.getElementById('" + img.getAttribute("id") + "').height,"
                  + "]");
    if (res.isArray()) {            
        JSArray attrs = res.asArray();                          
        if (attrs.get(0).isNumber()) {          
            float width = attrs.get(0).asNumber().getFloat();
            // use width variable
        }
        if (attrs.get(1).isNumber()) {              
            float height = attrs.get(1).asNumber().getFloat();
            // use height variable
        }

    }
}

  2. 如果图像没有这样的属性来分隔它们，您可以在 javascript 中调用一个函数，该函数返回一个元素数组，每个元素由 css 路径、宽度和高度组成。通过这样做，您可以直接访问图像的宽度和高度。也可以使用 css 路径访问DOMElement. 首先，将此脚本添加到您的 html 中：

    <script>
var cssPath = function(el) {
    if (!(el instanceof Element)) 
        return;
    var path = [];
    while (el.nodeType === Node.ELEMENT_NODE) {
        var selector = el.nodeName.toLowerCase();
        if (el.id) {
            selector += '#' + el.id;
            path.unshift(selector);
            break;
        } else {
            var sib = el, nth = 1;
            while (sib = sib.previousElementSibling) {
                if (sib.nodeName.toLowerCase() == selector)
                    nth++;
            }
            if (el.previousElementSibling != null || el.nextElementSibling != null)
                selector += ":nth-of-type("+nth+")";
        }
        path.unshift(selector);
        el = el.parentNode;
    }
    return path.join(" > ");
};
var getArray = function(selector) {
    var images = document.querySelectorAll(selector);
    var result = [];
    for (i = 0; i < images.length; ++i)
        result.push({'path': cssPath(images[i]), 'width' : images[i].width, 'height': images[i].height});
    return result;
};
</script>

    cssPath函数接受一个元素并返回 css 路径字符串。代码只是从这里（asselin 的答案）复制而来，稍作修改（替换if (nth != 1)为if (el.previousElementSibling != null || el.nextElementSibling != null)）。函数getArray接受一个选择器字符串并遍历querySelectorAll()结果，添加每个元素的width,height和 css 路径。

    然后getArray从java调用函数并解析结果：

    JSValue result = browser.executeJavaScriptAndReturnValue("getArray('a > img');");

if (result.isArray()) {

    JSArray res_arr = result.asArray();

    for (int i = 0 ; i < res_arr.length() ; i++) {

        if (res_arr.get(i).isObject()) {

            JSObject obj = res_arr.get(i).asObject();

            float width = obj.getProperty("width").asNumber().getFloat();
            float height = obj.getProperty("height").asNumber().getFloat();
            String path = obj.getProperty("path").getStringValue();

            DOMElement elem = doc.findElement(By.cssSelector(path));
            // use anything of elem you need            
        }       
    }
}
    • 确保在调用 javascript 函数时框架已完成加载，此处getArray。为此，您可以使用 call addLoadListeneronbrowser并将其传递给LoadAdapter. 然后使用onFinishLoadingFrame适配器的方法。
于 2016-02-23T16:48:39.487 回答