为什么不能移动到右下角解决方案 _JavaScript

为什么不能移动到右下角
我想实现点击里面的框框就移动到外面框框的右下角。。。
但是不知道什么原因，居然不能移动过去、。。

谢谢

HTML code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
  <style type="text/css">
#contentofnote {
    position: relative;
    border: 1px dashed;
    height: 50px;
    width: 50px;
}
#bottomrighttcorner {
    position: absolute;
    left: 0px;
    top: 0px;
    font-size: 0;
    cursor: se-resize;
    height: 7px;
    width: 7px;
    border: 1px solid;
    background-color: #fff;
}
</style>
<script type="text/javascript">
function $(id) {
return document.getElementById(id);
}
function updateCorner(e) {
    e = e || window.event;
    
    var br = $("bottomrighttcorner");
    var contentofnote = $("contentofnote");
    var height = contentofnote.offsetHeight;
    var width = contentofnote.offsetWidth;
    var cornerHeight = br.offsetHeight;
    var cornerWidth = br.offsetWidth;
    
    
    with (br.style) {
        left = width - cornerWidth + "px";
        top = height - cornerHeight + "px";
    }
//这里如果是常量那就正常。。但是变量我看过值是没错的。。
}
</script>
 </HEAD>
 <BODY>
  <div id="contentofnote">
  <div id="bottomrighttcorner"  onmousedown="updateCorner(event);">&nbsp;</div>
  </div>
 </BODY>
</HTML>

------解决方案--------------------

你使用了关键字

with (br.style) {
left = width - cornerWidth + "px";
top = height - cornerHeight + "px";
}

上面代码的width是br.style的
所以是错误的.

正确的代码应该是这样

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<style type="text/css">
#contentofnote {
position: relative;
border: 1px dashed;
height: 50px;
width: 50px;
}
#bottomrighttcorner {
position: absolute;
left: 0px;
top: 0px;
font-size: 0;
cursor: se-resize;
height: 7px;
width: 7px;
border: 1px solid;
background-color: #fff;
}
</style>
<script type="text/javascript">
function $(id) {
return document.getElementById(id);
}
function updateCorner(e) {
e = e || window.event;

var br = $("bottomrighttcorner");
var contentofnote = $("contentofnote");
var hbr = contentofnote.offsetHeight;
var wbr = contentofnote.offsetWidth;
var cornerHeight = br.offsetHeight;
var cornerWidth = br.offsetWidth;

//var width= contentofnote.clientWidth;
alert(cornerWidth);

with (br.style) {
var w = wbr - cornerWidth;
var h = hbr - cornerHeight;
//alert(w);
left = w+ "px";
top = h + "px";
}
//这里如果是常量那就正常。。但是变量我看过值是没错的。。
}
</script>
</HEAD>
<BODY>
<div id="contentofnote">
<div id="bottomrighttcorner" onmousedown="updateCorner(event);"> </div>