Javascript — 操作动态加载(或自动分页)内容的属性

Question

大型编辑 - 我已尝试尽可能清楚地解释我的问题。

我的目标:如果新加载图像的高度比浏览器高，则将新加载图像的高度设置为与浏览器大小相同。

我认为最好的方法是通过注释代码。目前已上线http://syndex.me .

以下转录本的完整 js 文件可以在 http://marckremers.com/syndex/js/jquery.infinitescrollfortumblr.js 处找到。

 //Gets the computed style of the image rather than the specified.
 //This was supplied very kindly by @RobG
 //The problem is that on first load, the height for the image is showing as 0 for the larger images.
 //Once it's cached, the functions shows the correct height.
 //I have no idea how to make this function work on a "on Ready" or "On Loaded"?

function getComputedStyle(el, styleProperty) {

 if (document && document.defaultView && document.defaultView.getComputedStyle) {
   var styleObj = document.defaultView.getComputedStyle(el, null);
   var floatStyle = (typeof document.body.style.cssFloat == 'string')?'cssFloat':'styleFloat';

   if (styleProperty == 'float') styleProperty = floatStyle;
   return styleObj && styleObj[styleProperty];
  }
}
    function addNextPage(oj) {
        if (oj.status == 404) {
            tAP.remainFlg = false;
            return;
        }
        var d = document.createElement("div");
        d.innerHTML = oj.responseText;
        var posts = tAP.gP(d.getElementsByTagName("*"));
        if (posts.length < 2) {
            tAP.rF = false;
            return;
        }
        d = document.createElement("div");
        d.className = "tumblrAutoPager_page_info";
        tAP.pp.appendChild(d);
        for (var i = 0; i < posts.length; i++) {
        //Goal: Set newly loaded images via this autopager script for tumblr
        //      to the height of the browser
        //      (So... IF the image is taller than the browser
        //      Make the image as tall as the browser)
        //      In effect I'm trying to make a dynamic image max-height based on the browser 

        // This is loading the new posts (part of the autopager script, not my code)
        tAP.pp.appendChild(posts[i]);

        //Over here I'm trying to reference the newly loaded imgs
        //BUT this is a horrible way of getting them, apprently.
        //It gets all the imgs in the entire document.
        //But it seems to work for my array below, anyhow
        //I really just need to deal with the new ones loaded in.
        var myDivs = tAP.pp.getElementsByTagName("img");
        }

        var myHeights = [];
        for (var n=0, iLen=myDivs.length; n<iLen; n++) {
    myHeights.push(getComputedStyle(myDivs[n], 'height'));
    }

    console.log(myHeights)
    //= I get an array of image heights, however the newly loaded imgs often show up as 0
    // so the "getcomputedstyle" script is not working as it should yet. 
    //once the page is cached, it works as it should
        //you can see the console logs here http://syndex.me

    //Over here would go:
    //"for each image
    //  if my height is taller then the window
    //  make me as tall as the window"

    //Finally, I have this working PERFECTLY in the jquery code
    //you can see it at http://syndex.me on the first page load.
    //since you can't bind .live or .delegate to events that don't "bubble" 
    //up the DOM tree, i.e. ".load", I can't get it to recognise
    //newly loaded images from this script
    //thats why i'm having to hack this file

        var footer = $("footer");
        footer ? footer.parentNode.appendChild(footer) : null;
        tAP.rF = true;
    }

提前致谢。

Answer 1

可能是因为myDivs包含 NodeList ，一个类似数组的对象，其中包含对匹配元素的索引引用，它没有 getAttribute()成员(member)。

相反，为各个元素添加下标(使用 [n] 或 item(n) )，其中将有一个 getAttribute()方法。或者只是使用width属性。