Question

我正在尝试创建一个用户上传照片的在线图片裁剪器，并显示一个可通过按钮更改的框（框架）。裁剪照片并将其发回给用户。

我在php（工作）中有一个表单上传器的基本模板。然后，它会在div上显示图片，并在其上方显示另一个透明div，并在边框上标记裁剪区域。

divs的初始值在css部分通过php设置，因为页面被发送给用户。我试图调整帧div的大小，因为给定的宽度是帧的图像宽度+2 px（高度相同），它应该只是图像宽度（-2 px））。

此代码应该正常工作，但是当弹出警报时，它们会显示框架宽度/高度未更改原始值，并且看起来好像框架没有更改。

<!DOCTYPE html>
<head>
<style type="text/css">
html, body {
    width: 500px;
    height: 334px;
    background-color: black;
}

.top {
    margin-top: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
    margin-right: 0px;
    width: 500px;
    height: 334px;
    position: absolute;
    background-color: transparent;
    border-width: 1px;
    border-style: solid;
    border-color: white;
    z-index: 999;
}

.bottom {
    top: 0px;
    left: 0px;
    position absolute;
    width: 500px;
    height: 334px;
    background-color: green;
//  background-image: url(uploads/1505002267.jpg);
    z-index: 998;
}
</style>

<script type="text/javascript">
function myOnLoad() {
    var w = 500;
    var h = 334;
    var frame = document.getElementsByClassName('top')[0];
    w = w - 2;
    h = h - 2;
    //frame.setAttribute("style", "width: " + w + "px;");
    //frame.setAttribute("style", "height: " + h + "px;");
    frame.style.width = w + "px;";
    frame.style.height = h + "px;";
    alert(frame.offsetWidth);
    alert(frame.offsetHeight);
}
</script>
<title>Test Website</title>
</head>
<body onload="myOnLoad()">
<div class="wrapper">
    <div class="bottom" id="image">
        <div class="top" id="frame">
        </div>
    </div>
</div>
</body>
</html>

我知道我可以更改php给css部分的值，但我还是需要在下一步中更改裁剪比例，所以我需要这种方式才能工作。请帮忙，我一直在查看这段代码。

Answer 1

删除引号中的分号。

frame.style.width = w + "px";
frame.style.height = h + "px";

此外，offsetHeight和offsetWidth会考虑边界。由于您的边框宽度为1px，因此它会使图像的高度和宽度增加2px，从而抵消2的减法。

详细了解MDN上的偏移量width和height。

加载后为什么div宽度/高度不变？

1 个答案: