Question

我喜欢Javascript是否仍然是一种可行且相对有效的流畅网站布局制作方法。 我知道可以使用Javascript创建流畅的布局，但相对于其他方法（例如CSS3 / HTML5），它在性能和复杂性方面如何表现？以下功能代表我的意思。在函数中，javascript用于查找各种元素的尺寸并相应地放置其他元素。要看它有效，follow this link。

＆＃13;

function onPageResize() {
  //center the header
  var headerWidth = document.getElementById('header').offsetWidth; //find the width of the div 'header'
  var insideHeaderWidth = (document.getElementsByClassName('header')[0].offsetWidth + document.getElementsByClassName('header')[1].offsetWidth + document.getElementById('logoHeader').offsetWidth); //find the combined width of all elements located within the parent element 'header'
  document.getElementsByClassName('header')[0].style.marginLeft = ((headerWidth - insideHeaderWidth) / 2) + "px"; //set the margin-left of the first element inside of the 'header' div
  /////////////////////////////////////////////////////////////////

  //justify alignment of textboxes
  var subtitleWidth = document.getElementsByClassName('subtitle'); //assign the properties of all elements in the class 'subtitle' to a new array 'subtitleWidth'
  var inputForm = document.getElementsByClassName('inputForm'); //assign the properties of all elements in the class 'inputForm' to a new array 'inputForm'
  for (i = 0; i < inputForm.length; i++) { //for every element in the array 'inputForm' set the margin-left to dynamically place the input forms relative to eachother
    inputForm[i].style.marginLeft = (subtitleWidth[4].offsetWidth - subtitleWidth[i].offsetWidth) + "px";
  }
  /////////////////////////////////////////////////////////////////

  //place footer on absolute bottom of page
  if (window.innerHeight >= 910) { //when the page is larger than '910px' execute the following
    var totalHeight = 0; //initialize a new variable 'totalHeight' which will eventually be used to calulate the total height of all elements in the window
    var bodyBlockHeight = document.getElementsByClassName('bodyBlock'); //assign the properties of all elements in the class 'bodyBlock' to a new array 'bodyBlockHeight'
    for (i = 0; i < bodyBlockHeight.length; i++) { //for every instance of bodyBlockHeight in the array, add the height of that element into the 'totalHeight'
      totalHeight += bodyBlockHeight[i].offsetHeight;
    }
    totalHeight += document.getElementById('header').offsetHeight; //finally, to add the height of the only element that has yet to be quantified, include the height of the element 'header' into the 'totalHeight'

    /*Set the margin-top of the element 'footer' to the result of subtracting the combined heights of all elements in the window from the height of the window.
    This will cause the footer to always be at the absolute bottom of the page, despite whether or not content actually exists there. */
    document.getElementById('footer').style.marginTop = (window.innerHeight - totalHeight) - document.getElementById('footer').offsetHeight + "px";
  } else {
    //if the page height is larger than 910px (approx the height of all elements combined), then simply place the footer 20px below the last element in the body
    document.getElementById('footer').style.marginTop = "20px"
  }
  /////////////////////////////////////////////////////////////////

}

＆＃13;

同样，可以查看上述功能的结果at this link。

感谢所有提出意见的人！

Answer 1

你应该使用CSS而不是JavaScript，因为这就是CSS的目的。如果您希望使用百分比宽度，浮动和媒体查询来进行流畅的布局。

Javascript是创建流体布局的有效方法吗？

1 个答案: