javascript - 使用 Jquery，如何查找属性百分比的像素值并将其添加到不同的属性？

Question

我是 jquery 新手，在使用它时遇到了一些问题。

.pageimage {
  width:80%;
  height:60%;
  margin:0 auto;
  background:#0FF;
  position:absolute;
  left:;
  top:20%;
}

使用jquery，我试图找到“top”的像素值，从该值中减去50%，然后将该值放在“left”属性上。

另外，有谁知道如何在调整浏览器窗口大小后重新运行此脚本？

非常感谢您的帮助。

Answer 1

您可以创造性地使用 .css() 方法轻松做到这一点。如果你得到一个元素的 .css("top") ，它会以 px 返回，所以你必须 replace("px","") 以便能够使用数值，然后除以 2，然后再次在末尾添加 "px"。

将其包装在一个函数中，并在页面加载时调用它。然后添加一个 $window.resize() 处理程序，以便在每次窗口加载后调整大小时运行该函数。

这是一个完整的示例:

function updatePageImageLeft() {
  var calculatedLeft = $(".pageimage").css("top").replace("px", "") / 2 + "px";
  // console.log(calculatedLeft);
  $(".pageimage").css("left", calculatedLeft);
}

// Called when the page loads
updatePageImageLeft();

// Page has been resized, call it again
$(window).resize(function() {
  updatePageImageLeft();
});

.pageimage {
  width: 80%;
  height: 60%;
  margin: 0 auto;
  background: #0FF;
  position: absolute;
  /*left: ;*/
  top: 20%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="pageimage"></div>

注意:您可能还想查看 CSS calc() function ，因为它可以帮助您避免首先编写任何 Javascript/jQuery 代码(特别是如果您将其与 CSS 自定义属性结合使用)。