element.style.top 在变为什么 对应元素位置可以不变？
Document
*{
margin: 0;
padding: 0;
}
body{
/*height: 1000px;*/
/*position: relative;*/
/*margin:0px;
padding:0px;*/
}
.point {
position: absolute;
border: 5px solid red;
}
.ball{
width:4px;
height:4px;
/*background: #d9fe37;*/
background: red;
border-radius: 50%;
position: absolute;
}
#sketchPad{
/*width: 400px;
height: 400px;*/
/*left: 100px;
top: 100px;*/
/*background-color: #ff0;
overflow: auto;*/
/*position: relative;*/
}
.small{
position: relative;
height: 300px;
overflow: auto;
}
.small img{
height: 300px;
}
#selectImage{
left: 200px;
top: 500px;
position: absolute;
}
.box{
width: 300px;
height: 300px;
margin: 100px;
border: 1px solid #ccc;
position: relative;
/*overflow: auto;*/
}
.big{
width: 600px;
height: 600px;
position: absolute;
top: 0;
left: 560px;
border: 1px solid #ccc;
overflow: auto;
/*display: none;*/
display: block;
background-color: #eee;
}
.big::-webkit-scrollbar{
display: none;
}
.mask{
width: 50px;
height: 50px;
background: rgba(255,255,0,0.4);
position: absolute;
top: 0;
left: 0;
/*鼠标的样式*/
cursor: crosshair;
display: none;
}
.big img{
position: absolute;
height: 3600px; /*box.height*big.width/mask.width */
top: 0;
left: 0;
}
.aim{
position: absolute;
top: 50%;
left: 50%;
width: 20px;
margin-left: -10px;
height: 20px;
margin-top: -10px;
display: block;
/*z-index: 8*/
}
.aim__ver{
position: absolute;
top: 50%;
left: 50%;
width: 2px;
height: 40px;
margin-top: -20px;
margin-left: -1px;
background-color: #f00;
}
.aim__hor{
position: absolute;
top: 50%;
left: 50%;
width: 40px;
height: 2px;
margin-top: -1px;
margin-left: -20px;
background-color: #f00;
}
创建连线
这是一个自己的小练习，目的就是标记测量图片中相关标的尺寸。鼠标移动时还带有一个放大镜效果。
出现的问题是：点击左下角【创建连线】按钮并点击图中某位置，选中第一个标记点后，通过354-355行（倒数10行左右
console.log("mask.style.left = ",mask.style.left);
console.log("mask.style.top = ",mask.style.top);
）中代码设置，在控制台明明看到x和y都在随着鼠标移动不断更新，但是偏偏无法对黄色mask框的left和top正确赋值。想得脑瓜疼，希望指教下 element.style.top和element.style.left控制css属性失效的原因
|
免责声明：本内容仅代表回答会员见解不代表天盟观点，请谨慎对待。
版权声明：作者保留权利，不代表天盟立场。
|
|
|
|
|
|
|
|
天盟APP下载
