堆栈内存溢出
  繁体   English   中英

使用JavaScript在视口中居中DIV

[英]Centering a DIV in viewport with JavaScript

 原文  2012-12-07 06:19:51  3   3    javascript/ css

问题描述

我试图使用下面的代码将DIV置于屏幕中心，但它对我不起作用。 有人请建议我让它工作 

            var hnw = {};
            hnw.w = 0;
            hnw.h = 0;
            if (!window.innerWidth) {
                if (!(document.documentElement.clientWidth == 0)) {
                    hnw.w = document.documentElement.clientWidth;
                    hnw.h = document.documentElement.clientHeight;
                }
                else {
                    hnw.w = document.body.clientWidth;
                    hnw.h = document.body.clientHeight;
                }
            }
            else {
                hnw.w = window.innerWidth;
                hnw.h = window.innerHeight;
            }
            var midEle = document.createElement('div');
            var _x = 0;
            var _y = 0;
            var offsetX = 0;
            var offsetY = 0;
            if (!window.pageYOffset) {
                if (!(document.documentElement.scrollTop == 0)) {
                    offsetY = document.documentElement.scrollTop;
                    offsetX = document.documentElement.scrollLeft;
                }
                else {
                    offsetY = document.body.scrollTop;
                    offsetX = document.body.scrollLeft;
                }
            }
            else {
                offsetX = window.pageXOffset;
                offsetY = window.pageYOffset;
            }
            midEle.style.width = "300px";
            midEle.style.height = "300px";
            midEle.innerHTML = "Some Text";
            midEle.style.display = "block";
            var _x_w = parseInt(midEle.style.width, 10), _y_h = parseInt(midEle.style.height, 10);
            _x = ((hnw.w - _x_w) / 2) + offsetX;
            _y = ((hnw.h - _y_h) / 2) + offsetY;
            console.log(_x, " ", _y);
            midEle.style.position = "absolute";

            midEle.style.left = _x;
            midEle.style.top = _y;
            document.body.appendChild(midEle);

3 个解决方案

解决方案1
 7 已采纳  2012-12-07 06:46:52

不能用CSS来完成吗？

使用Javascript： 

var midEle = document.createElement('div');
midEle.className = 'centered';
document.body.appendChild(midEle);

CSS： 

​.centered{ 
    background-color: red;
    height: 300px;
    width: 300px;
    margin: -150px 0 0 -150px;
    top: 50%;
    left: 50%;
    position: fixed;
}​

http://jsfiddle.net/FkEyy/3/

通过将边距设置为元素高度和宽度的负半部分，并将顶部和左侧值设置为50％，您将使元素居中。 这是用CSS集中内容的常用方法:)

解决方案2
 3  2012-12-07 06:27:36

对于left和top样式属性，缺少px 。 值必须为px或%

更改 

  midEle.style.left = _x;
  midEle.style.top = _y;

至 

  midEle.style.left = _x+"px";
  midEle.style.top = _y+"px";

演示： http ： //jsfiddle.net/muthkum/AFkKt/

解决方案3
 2  2012-12-07 07:13:31

如果您想使用vanilla JavaScript在浏览器视口中居中，那么这是一个演示。

http://jsfiddle.net/CDtGR/5/ 

<html>
<!--measure size of elements, 
   get absolute position of elements, 
   get viewport size and scrollposition-->
<script>
var mesr =
{
    Metrics: {
        px: 1,
        measureUnits: function(target) {
            if(typeof(target) == 'undefined')
                target = document.getElementsByTagName('body')[0];
            mesr.Metrics.measureUnit("em", target);
            mesr.Metrics.measureUnit("pt", target);
            mesr.Metrics.measureUnit("%", target);
        },
        measureUnit: function(unit, target) {
            if(typeof(target.Metrics) == 'undefined')
                target.Metrics = {};
            var measureTarget = target;
            if(target.tagName == 'IMG' && typeof(target.parentNode) != 'undefined')
                measureTarget = target.parentNode;
            var measureElement = document.createElement("div");
            measureElement.style.width = "1"+unit;
            measureElement.style.cssFloat = "left";
            measureElement.style.styleFloat = "left";
            measureElement.style.margin = "0px";
            measureElement.style.padding = "0px";            
            measureTarget.appendChild(measureElement);
            target.Metrics[unit] = measureElement.offsetWidth;
            measureElement.parentNode.removeChild(measureElement);
            return target.Metrics[unit];
        },
        getUnitPixels: function(unitString, target) {
            if(typeof(target) == 'undefined')
                target = document.getElementsByTagName('body')[0];
            if(typeof(target.Metrics) == 'undefined')
                mesr.Metrics.measureUnits(target);
            var unit = unitString.replace(/[0-9\s]+/ig,'').toLowerCase();
            var size = Number(unitString.replace(/[^0-9]+/ig,''));            
            if(typeof(target.Metrics[unit]) == 'undefined')
                return 0;
            var metricSize = target.Metrics[unit];
            var pixels = Math.floor(Number(metricSize * size));
            return pixels;
        }
    },    
    getElementOffset: function(target) {
        var pos = [target.offsetLeft,target.offsetTop];
        if(target.offsetParent != null) {
            var offsetPos = mesr.getElementOffset(target.offsetParent);
            pos =     [
                    pos[0] + offsetPos[0],
                    pos[1] + offsetPos[1]
                    ];
        }
        return pos;
    },
    getElementPosition: function(target) {

        var offset = mesr.getElementOffset(target);
        var x = offset[0] +
        mesr.Metrics.getUnitPixels(target.style.paddingLeft, target) +
        mesr.Metrics.getUnitPixels(target.style.borderLeftWidth, target);
        var y = offset[1] +
        mesr.Metrics.getUnitPixels(target.style.paddingTop, target) +
        mesr.Metrics.getUnitPixels(target.style.borderTopWidth, target);
        return [x,y];
    },    
    getElementSize: function(target) {
        var size = [target.offsetWidth, target.offsetHeight];
        size[0] -=     mesr.Metrics.getUnitPixels(target.style.paddingLeft, target) +
                    mesr.Metrics.getUnitPixels(target.style.paddingRight, target) +
                    mesr.Metrics.getUnitPixels(target.style.borderLeftWidth, target) +
                    mesr.Metrics.getUnitPixels(target.style.borderRightWidth, target);
        size[1] -=     mesr.Metrics.getUnitPixels(target.style.paddingTop, target) +
                    mesr.Metrics.getUnitPixels(target.style.paddingBottom, target) +
                    mesr.Metrics.getUnitPixels(target.style.borderTopWidth, target) +
                    mesr.Metrics.getUnitPixels(target.style.borderBottomWidth, target);
        return size;
    },
    getViewPortSize: function () {
          var myWidth = 0, myHeight = 0;
          if( typeof( window.innerWidth ) == 'number' ) {
            myWidth = window.innerWidth;
            myHeight = window.innerHeight;
          } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
            myWidth = document.documentElement.clientWidth;
            myHeight = document.documentElement.clientHeight;
          } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
            myWidth = document.body.clientWidth;
            myHeight = document.body.clientHeight;
          }
        return [myWidth, myHeight];
    },
    getViewPortScrollPosition: function () {
      var scrOfX = 0, scrOfY = 0;
      if( typeof( window.pageYOffset ) == 'number' ) {
        scrOfY = window.pageYOffset;
        scrOfX = window.pageXOffset;
      } else if( document.body && ( document.body.scrollLeft || document.body.scrollTop ) ) {
        scrOfY = document.body.scrollTop;
        scrOfX = document.body.scrollLeft;
      } else if( document.documentElement && ( document.documentElement.scrollLeft || document.documentElement.scrollTop ) ) {
        scrOfY = document.documentElement.scrollTop;
        scrOfX = document.documentElement.scrollLeft;
      }
      return [ scrOfX, scrOfY ];
    },
    attachEvent : function(target, eventList, func) {
        if(typeof (target) == "undefined" || target == null)
            return;
        var events = eventList.split(",");
        for(var i=0;i<events.length;i++) {
            var event = events[i];
            if(typeof(target.addEventListener) != 'undefined') {
                target.addEventListener(event, func);
            } else if(typeof(target.attachEvent) != 'undefined') {
                target.attachEvent('on'+event,func);
            } else {
                console.log("unable to attach event listener");
            }
        }
    }
}
</script>

<!--positioning-->
<script>
function position(){
    var viewPortSize = mesr.getViewPortSize();
    var viewPortScrollPos = mesr.getViewPortScrollPosition();
    var size = mesr.getElementSize(document.getElementById('apa'));
    document.getElementById('apa').style.left = Math.floor((viewPortSize[0]/2)-(size[0]/2)+viewPortScrollPos[0])+"px";
    document.getElementById('apa').style.top = Math.floor((viewPortSize[1]/2)-(size[1]/2)+viewPortScrollPos[1])+"px";
}    

mesr.attachEvent(window,"resize,scroll,load",position);    
mesr.attachEvent(document,"load",position); 
</script>

<body>

<div id="apa" style="position:absolute;">some text</div>

</body>

</html>

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 Javascript以页面为中心的div 用JavaScript居中DIV Javascript：将Div置于视口中时对其进行动画处理 当 div 在视口中时加载 Javascript 使用Javascript居中文本并使用CSS3视口调整大小在调整大小时变得生涩 使用javascript / jquery将动态宽度的div居中？ 希望当Div在视口中时运行JavaScript脚本 视口容器中的Javascript拖动div 将 div position 更改为用 javascript 固定将 div 附加到文档而不是视口 居中一个 <div> 最大宽度，使用Javascript / JQuery
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM