gpt4 book ai didi

javascript - 将 .outerWidth() 和 .outerHeight() 与 'resize' 事件一起使用,使子元素在父元素中居中

转载 作者:行者123 更新时间:2023-12-03 05:12:04 24 4
gpt4 key购买 nike

我正在尝试编写一些 JavaScript 代码,这些代码允许我使用填充将子元素置于其父元素的中心。然后使用相同的函数通过“resize”事件重新计算间距。在你开始问我为什么不使用 CSS 来做这件事之前,这段代码只是一个更大项目的一小部分。我已经简化了代码,因为其余代码都可以工作,并且只会混淆主题。

计算空间 - 这是计算子元素两侧要使用的空间量的函数。

($outer.outerWidth() - $inner.outerWidth()) / 2;
($outer.outerHeight() - $inner.outerHeight()) / 2;

问题

尽管我已经成功地在 margin 的情况下获得了预期的结果。填充给我带来了问题。

  1. 调整大小时,外部元素的宽度似乎会增加
  2. 它没有使子元素完美居中(似乎存在偏移)
  3. 内部元素在调整大小时折叠并变得不可见。

我意识到可能有一些有关填充的基本原理导致了我的问题,但是在大量控制台日志并观察返回的数据之后,我仍然无法确定问题所在。任何建议都将非常受欢迎。事实可能证明这根本不可行。

HTML

 <div id="demo" class="outer">
<div class="inner">

</div>
</div>

CSS

html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}

.outer {
width:97%;
height:400px;
border:1px solid black;
margin:20px;
}

.inner {
width:40%;
height:100px;
background-color:grey;
}

JAVASCRIPT

var $outer = $(".outer");
var $inner = $(".inner");

var getSpace = function(axis) {

if (axis.toLowerCase() == "x") {

return ($outer.outerWidth() - $inner.outerWidth()) / 2;

} else if (axis.toLowerCase() == "y") {

return ($outer.outerHeight() - $inner.outerHeight()) / 2;

}

}

var renderStyle = function(spacingType) {

var lateralSpace = getSpace("x");
var verticalSpace = getSpace("y");

var $element;

if (spacingType == "padding") {
$element = $outer;
} else if (spacingType == "margin") {
$element = $inner;
}

$.each(["top", "right", "bottom", "left"], function(index, direction) {
if (direction == "top" || direction == "bottom") {
$element.css(spacingType + "-" + direction, verticalSpace);
}
else if (direction == "right" || direction == "left") {
$element.css(spacingType + "-" + direction, lateralSpace);
}
});
};

var renderInit = function() {

$(document).ready(function() {

renderStyle("padding");

});

$(window).on("resize", function() {

renderStyle("padding");

});

}

renderInit();

示例 - link

最佳答案

虽然我完全不同意这种水平居中元素的方法,但希望这会对您有所帮助。

fiddle :https://jsfiddle.net/0uxx2ujg/

JavaScript:

var outer = $('.outer'), inner = $('.inner');
function centreThatDiv(){
var requiredPadding = outer.outerWidth() / 2 - (inner.outerWidth() / 2);
console.log(requiredPadding);
outer.css('padding', '0 ' + requiredPadding + 'px').css('width','auto');
}

$(document).ready(function(){
// fire on page load
centreThatDiv();
});

$(window).resize(function(){
// fire on window resize
centreThatDiv();
});

HTML:

<div class="outer">
<div class="inner">Centre me!</div>
</div>

CSS:

.outer{ width:80%; height:300px; margin:10%; background: tomato; }
.inner{ width:60px; height:60px; background:white; }

进一步阐述我不同意这种方法的原因 - JavaScript 不应该用于布局。当然 - 可以,如果它确实需要使用;但对于像将元素居中这样简单的事情,则完全没有必要。浏览器会自行处理 CSS 元素大小的调整,因此使用 JS 会给自己带来更多麻烦。

以下是一些如何仅通过 CSS 实现此目的的示例:

文本对齐:居中和显示:内联 block https://jsfiddle.net/0uxx2ujg/1/

position:absolute和左:50% https://jsfiddle.net/0uxx2ujg/2/ (这也可以用于垂直居中,这比水平居中更棘手)

关于javascript - 将 .outerWidth() 和 .outerHeight() 与 'resize' 事件一起使用,使子元素在父元素中居中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41763873/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com