这是我的代码。我更喜欢在没有 jquery 的情况下纯粹在 javascript 上创建一个调整大小框。代码使我能够在拖动它时调整段落的宽度，但它似乎没有按预期工作。
<html>
<head>
<style>
div{
border: 1px solid black;
width: 500px;
height: 500px;
padding: 0px;
margin: 0px;
}
p{
border: 1px solid red;
position: absolute;
height: 200px;
width: 200px;
padding: 0px;
margin: 0px;
}
</style>
<script>
window.onload = function(){
document.body.onmousedown = function(event){
var mouseStartX = event.clientX;
var mouseStartY = event.clientY;
var div = document.getElementsByTagName("div");
var para = document.createElement("p");
div[0].appendChild(para);
document.styleSheets[0].cssRules[1].style.top = mouseStartY;
document.styleSheets[0].cssRules[1].style.left = mouseStartX;
document.body.onmousemove = function(event){
if(para){
document.styleSheets[0].cssRules[1].style.width = event.clientY - mouseStartY;
}
}
document.body.onmouseup = function(){
div[0].removeChild(para);
}
};
};
</script>
</head>
<body>
<div>
</div>
</body>
</html>
我的问题是我希望当我向右拖动鼠标时 p 会继续放大，但只有当我拖动到某个点时它才会起作用
最佳答案
我只能尝试回答你的问题，因为你的措辞有点含糊。但是，我将您的代码复制并粘贴到我加载到网络浏览器中的测试 HTML 文件中，我可以猜到您遇到的问题是什么。问题是 p 在您拖动光标时会变大，但它并没有一直变大到右边框与您的光标对齐。
首先，在您的 document.body.onmousemove 函数中:
document.body.onmousemove = function (event) {
if (para) {
document.styleSheets[0].cssRules[1].style.width = event.clientY - mouseStartY;
}
}
当我认为您指的是 event.clientX 和 mouseStartX 时，您写了 event.clientY 和 mouseStartY。但是，您还修改了 CSS 规则，因此您必须将单位 px 附加到宽度的末尾:
document.body.onmousemove = function (event) {
if (para) {
document.styleSheets[0].cssRules[1].style.width = (event.clientX - mouseStartX) + "px";
// The parentheses are technically not required; I put them there for clarity.
}
}
这两行代码也是一样:
document.styleSheets[0].cssRules[1].style.top = mouseStartY;
document.styleSheets[0].cssRules[1].style.left = mouseStartX;
您忘记包括单位。只需在每行末尾添加 + "px" 即可:
document.styleSheets[0].cssRules[1].style.top = mouseStartY + "px";
document.styleSheets[0].cssRules[1].style.left = mouseStartX + "px";
此外，最好只删除 window.onmouseup 函数中的 window.onmousemove 和 window.onmouseup 而不是检查 para 在你的 window.onmousemove 函数中。即使您从 div 中删除了 para，它的计算结果仍然是 true。
最后，不用通过 document.styleSheets[0].cssRules[1] 修改样式表，您可以使用 直接编辑 而不是 para 的样式>para.style.widthdocument.styleSheets[0].cssRules[1].style.width。
我重写了你的 window.onload 函数，如下所示:
window.onload = function(){
document.body.onmousedown = function(event){
var mouseStartX = event.clientX,
mouseStartY = event.clientY,
div = document.getElementsByTagName("div"),
para = document.createElement("p");
div[0].appendChild(para);
para.style.top = mouseStartY + "px";
para.style.left = mouseStartX + "px";
document.body.onmousemove = function(event){
para.style.width = event.clientX - mouseStartX + "px";
//para.style.height = event.clientY - mouseStartY + "px";
// Uncomment the line above if you want to drag the height, too.
}
document.body.onmouseup = function(){
div[0].removeChild(para);
document.body.onmousemove = null;
document.body.onmouseup = null;
}
};
};
关于javascript - 为什么我的 javascript 拖动调整框不能按预期工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17492730/