0
大型编辑 - 我试图尽可能清楚地解释我的问题。Javascript - 操纵动态加载（或自动加载）内容的属性
我的目标：到新加载的图像的高度设置为浏览器的大小相同，如果其高度比浏览器高。
我可以做到这一点的最佳方式是通过我认为的评论代码。 它目前住在http://syndex.me。
的成绩单之下，从可以达到取自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;
}
在此先感谢完整的JS文件。
不找好... http://reference.sitepoint.com/javascript/Element/getAttribute –
大，没问题...我真正需要的是刚刚拿到宽度这些divs并能够操纵它们。 – RGBK
如果可以，请使用jQuery，YUI，MooTools，Prototype，Dojo，Scriptaculous等... –