Помогите отредактировать скрипт.
Приветствую всех кто рад мне помочь.
Столкнулся с проблемой в одном из скриптов, который делает колонки блоков одной высоты. Так вот, в скрипте указаны две переменные, для которых можно задать выравнивание двух блоков. Мне нужно добавить третью, но в конце кода не понимаю одну функцию. Нуждаюсь в вашей помощи:
addLoadListener(equalHeight);
function equalHeight() {
var myLeftColumn = document.getElementById("left_column");
var myRightColumn = document.getElementById("right_column");
var myLeftHeight = myLeftColumn.offsetHeight;
var myRightHeight = myRightColumn.offsetHeight;
var myLeftBorderTopPixels = retrieveComputedStyle(myLeftColumn, "borderTopWidth");
var myLeftBorderBottomPixels = retrieveComputedStyle(myLeftColumn, "borderBottomWidth");
var myLeftPaddingTopPixels = retrieveComputedStyle(myLeftColumn, "paddingTop");
var myLeftPaddingBottomPixels = retrieveComputedStyle(myLeftColumn, "paddingBottom");
var myRightBorderTopPixels = retrieveComputedStyle(myRightColumn, "borderTopWidth");
var myRightBorderBottomPixels = retrieveComputedStyle(myRightColumn, "borderBottomWidth");
var myRightPaddingTopPixels = retrieveComputedStyle(myRightColumn, "paddingTop");
var myRightPaddingBottomPixels = retrieveComputedStyle(myRightColumn, "paddingBottom");
var myLeftBorderNumber = Number(myLeftBorderTopPixels.replace("px", "")) + Number(myLeftBorderBottomPixels.replace("px", ""));
var myLeftPaddingNumber = Number(myLeftPaddingTopPixels.replace("px", "")) + Number(myLeftPaddingBottomPixels.replace("px", ""));
var myLeftExtras = myLeftBorderNumber + myLeftPaddingNumber;
var myRightBorderNumber = Number(myRightBorderTopPixels.replace("px", "")) + Number(myRightBorderBottomPixels.replace("px", ""));
var myRightPaddingNumber = Number(myRightPaddingTopPixels.replace("px", "")) + Number(myRightPaddingBottomPixels.replace("px", ""));
var myRightExtras = myRightBorderNumber + myRightPaddingNumber;
if (myLeftHeight > myRightHeight) {
myRightColumn.style.height = (myLeftHeight - myRightExtras) + "px";
}
else {
myLeftColumn.style.height = (myRightHeight - myLeftExtras) + "px";
}
}
function retrieveComputedStyle(element, styleProperty)
{
var computedStyle = null;
if (typeof element.currentStyle != "undefined")
{
computedStyle = element.currentStyle;
}
else
{
computedStyle = document.defaultView.getComputedStyle(element, null);
}
return computedStyle[styleProperty];
}
function addLoadListener(fn)
{
if (typeof window.addEventListener != 'undefined')
{
window.addEventListener('load', fn, false);
}
else if (typeof document.addEventListener != 'undefined')
{
document.addEventListener('load', fn, false);
}
else if (typeof window.attachEvent != 'undefined')
{
window.attachEvent('onload', fn);
}
else
{
var oldfn = window.onload;
if (typeof window.onload != 'function')
{
window.onload = fn;
}
else
{
window.onload = function()
{
oldfn();
fn();
};
}
}
}
|
Chkolnik,
может без js ? на одном css решить? |
колонки одинаковой высоты на js
Chkolnik,
:(
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.hot{
border: 1px dashed Gray; padding: 5px; height: 200px; width: 100px ;
background-color: #00BFFF;
float: left;
transition: all 3s ease;
}
.hot:nth-of-type(2)
{
height : 300px; background-color: #FF69B4;
}
.hot:nth-of-type(1)
{
height : 100px; background-color: #FFD700;
}
</style>
<script>
window.addEventListener("DOMContentLoaded", function() {
var divs = document.querySelectorAll(".hot"),
height = [].reduce.call(divs, function(height, div) {
return div.scrollHeight > height ? div.scrollHeight : height
}, 0);
[].forEach.call(divs, function(el) {
el.style.height = height + "px"
})
});
</script>
</head>
<body>
<div class="hot"></div>
<div class="hot"></div>
<div class="hot"></div>
</body>
</html>
|
рони,
Не подскажите как решить без js и flexbox'a :) |
Botik21,
https://habrahabr.ru/post/64173/ http://htmlbook.ru/samlayout/tipovye...nakovoi-vysoty гугл вам в помощь. |
| Часовой пояс GMT +3, время: 05:30. |