Question

这个问题的问题是，当扩展位于div中间的div时，该元素将偏离中心。与其他问题的不同之处在于，我无法确定div的宽度和高度。因此，我需要一个解决方案。

我现在有了解决方案，谢谢您的帮助！

我提供了一些代码来帮助解释我遇到的问题。

var elem = document.getElementById("one");

var onload = function() {
  elem.style.left = "calc(50% - 40px)";
  elem.style.top = "calc(50% - 40px)";
}
onload();

var expand = document.getElementById("expand");
var reset = document.getElementById("reset");

expand.addEventListener("click", function () {
	elem.style.width = "200px";
  elem.style.height = "200px";
});

reset.addEventListener("click", function () {
	elem.style.width = "80px";
  elem.style.height = "80px";
});

#one {
    width: 80px;
    height: 80px;
    background-color: red;
    position: absolute;
    border-radius: 50%;
    transition: all 2s;
}

<div id="one"></div>
<button id="expand">click</button>
<button id="reset">reset</button>

Answer 1

我建议您在X和Y方向上都将您的左右位置保持在50％，并且将-50％转换。无需任何计算或JavaScript。

删除动态添加的内联CSS并将其更新为：

#one {
    width: 80px;
    height: 80px;
    background-color: red;
    position: absolute;
    border-radius: 50%;
    transition: all 2s;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

Answer 2

您不需要任何JS，可以将元素居中，而将CSS放在其偏移父级中：

position: absolute;
left: 50%; 
top: 50%; 
transform: translate(-50%, -50%);

var elem = document.getElementById("one");

// you don't need that
// var onload = function() {
//   elem.style.left = "calc(50% - 40px)";
//   elem.style.top = "calc(50% - 40px)";
// }
// onload();

var expand = document.getElementById("expand");
var reset = document.getElementById("reset");

expand.addEventListener("click", function() {
  const size = Math.floor(Math.random() * 300) + 50;

  elem.style.width = elem.style.height = size + "px";
});

reset.addEventListener("click", function() {
 // just remove the styles.
 // fall back to what's defined in the CSS
  elem.style.width = elem.style.height = "";
});

#one {
  width: 80px;
  height: 80px;
  background-color: red;
  border-radius: 50%;
  /* 
     be more precise; 
     transition all can be devastating for the performance 
  */
  transition: width 2s, height 2s;
  
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

<div id="one"></div>
<button id="expand">resize</button>
<button id="reset">reset</button>

Answer 3

我建议编辑v以处理动态宽度，如下所示：

vec![2,5,6]

现在您可以重置按钮单击事件的位置。

示例：

onload function

var onload = function(w) {
  elem.style.left = `calc(50% - ${w})`;
  elem.style.top = `calc(50% - ${w})`;
}

var elem = document.getElementById("one");

var onload = function(w) {
  elem.style.left = `calc(50% - ${w})`;
  elem.style.top = `calc(50% - ${w})`;
}
onload("40px");

var expand = document.getElementById("expand");
var reset = document.getElementById("reset");

expand.addEventListener("click", function () {
	elem.style.width = "200px";
  elem.style.height = "200px";
  onload("100px");
});

reset.addEventListener("click", function () {
	elem.style.width = "80px";
  elem.style.height = "80px";
  onload("40px");
});

我希望这会有所帮助。

如何扩展元素但保持其位置？

3 个答案: