Question

如果我有一个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结合使用？谢谢！

Answer 1

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

如果有某些属性可以将图片彼此分开，例如id，那么您可以使用width方法获取图片height和.executeJavaScriptAndReturnValue：< / p>

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
        }

    }
}

如果图像没有这样的属性来分隔它们，你可以在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路径字符串。代码只是从here（asselin的答案）复制而稍加修改（将if (nth != 1)替换为if (el.previousElementSibling != null || el.nextElementSibling != null)）。函数getArray使用选择器sting并遍历querySelectorAll()结果，添加每个元素的width，height和css路径。

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

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。为此，您可以在addLoadListener上使用致电browser并将其传递给LoadAdapter。然后使用适配器的onFinishLoadingFrame方法。

Jxbrowser：从DOMElement获取图像宽度和高度

1 个答案: