Сообщение от Aetae
|
Собсно надо объединить clientRect'ы нескольких элементов.
Сейчас делаю так:
arr //массив элементов
i //arr.length
var result = {'top':[],'bottom':[],'left':[],'right':[]}, position;
while(i--) {
position = arr[i].getBoundingClientRect();
for(var j in result) result[j].push( position[j] );
}
position = {
'top' : Math.min.apply(0,result.top),
'left' : Math.min.apply(0,result.left),
'bottom': Math.max.apply(0,result.bottom),
'right' : Math.max.apply(0,result.right)
}
Но как-то оно неэстетично смотрится. И чувство возникает, что можно сделать как-то красивее, без лишних телодвижений.(делаю для себя поэтому могу потратить часок другой на эстетические изыски  )
Нужен только ff, так что можно использовать всё вплоть до js1.8.)
|
как же я жалею. о том, что не проникся к генераторам
наверное, как-то уродливо
но нерасширяемо, это уж точно - условие просто ппц ... а так красиво
var arr = document.querySelectorAll("b");
var result = [].reduce.call(arr, function (prev, curr) {
curr = curr.getBoundingClientRect();
for (var prop in curr) if (prev[prop] === null || ( (prop === "top" || prop === "left") ? (prev[prop] >= curr[prop]):(prev[prop] <= curr[prop])) ) {
prev[prop] = curr[prop];
}
return prev;
}, { top: null, left: null, right: null, bottom: null });
<body>
<b>LOL</b>
<br><br>
<b>LOL</b>
<b>LOL</b>
<br>
<b>LOL</b>
</body>
<script>
var arr = document.querySelectorAll("b");
var result = [].reduce.call(arr, function (prev, curr) {
curr = curr.getBoundingClientRect();
for (var prop in curr) if (prev[prop] === null ||
( (prop === "top" || prop === "left") ? (prev[prop] >= curr[prop]):(prev[prop] <= curr[prop])) ) {
prev[prop] = curr[prop];
}
return prev;
}, { top: null, left: null, right: null, bottom: null });
var a = document.createElement("div");
a.style.cssText = "position: absolute;border: 1px green solid;";
document.body.appendChild(a);
a.style.top = result.top + 'px';
a.style.left = result.left + 'px';
a.style.height = result.bottom + 'px';
a.style.width = result.right + 'px';
</script>