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

私の知る限り、要素を直接取得するための API はありませheightんwidth。heightgetとの 2 つの方法を示します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)）。functiongetArrayはセレクター文字列を受け取り、すべての要素の と css パスを追加して結果を反復処理しますquerySelectorAll()。widthheight

    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 addLoadListeneronを使用しbrowserて、それを渡すことができますLoadAdapter。次にonFinishLoadingFrame、アダプターの方法を使用します。
于 2016-02-23T16:48:39.487 に答える