Помогите отредактировать скрипт.
Приветствую всех кто рад мне помочь.
Столкнулся с проблемой в одном из скриптов, который делает колонки блоков одной высоты. Так вот, в скрипте указаны две переменные, для которых можно задать выравнивание двух блоков. Мне нужно добавить третью, но в конце кода не понимаю одну функцию. Нуждаюсь в вашей помощи: 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, время: 23:32. |