Question

我正在尝试将边框应用于div图像组（该图像必须处于绝对位置模式，因为用户选择并四处移动它们），并且由于某种原因无法弄清为什么会出现这种情况。工作。在我的代码中，我将图像移动到div容器内部，并希望整个div容器根据内部事物的大小显示适当的边框。这是一些简化的代码，也许只有一个小错误，我看不到，才能正常工作。

由于某些原因，在有人将其放入代码段后，编辑代码很麻烦。这是一个代码修复：fixBorder（）到tryBorder（）

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Test</title>
<style type="text/css">
.item {
  position: absolute;
  height: auto;
  opacity: 1;
}

.mouseover { border:1px dashed green; }

</style>
<script>
function id(name) { return document.getElementById(name); }
function tryBorder() {
    var w1 = id("part-1").style.width.replace("px", "");
    var h1 = id("part-1").style.height.replace("px", ""); 
  var l1 = id("part-1").style.left.replace("px", "");
  var t1 = id("part-1").style.top.replace("px", "");

    var w2 = id("part-2").style.width.replace("px", "");
  var h2 = id("part-2").style.height.replace("px", ""); 
  var l1 = id("part-2").style.left.replace("px", "");
  var t1 = id("part-2").style.top.replace("px", "");

  // "math" for the group size and position
  var wOverlay = l2 - w1;
  var hOverlay = t2 - h1;

  var wg = w1 + w2 - wOverlay;
  var hg = h1 + h2 - hOverlay;

  var lg = ( l1 < l2 ) ? l1 : l2;
  var tg = ( h1 < h2 ) ? h1 : h2;

  // ok, now how to I apply that math? is it easy? 
    id('group').onmouseover = function(event) {  
      alert("on mouseover");
    if (! event.shiftKey) elem.classList.add('mouseover'); 
    else elem.classList.remove('mouseover');
  }

  id('group').style.left = lg + "px";
  id('group').style.top = hg + "px";

  id('group').style.width =  width + "px";
  id('group').style.height = height + "px";
} 
</script>
</head>
<body onload="tryBorder();">
<div id="group" style="border:5px solid red">
  <img id="part-1" class="item" src="https://dummyimage.com/640x4:3/"> 
  <img id="part-2" class="item" src="https://dummyimage.com/300/09f.png/fff">  
 </div>
</body>
</html>

Answer 1

如果我理解您尝试此代码

function id(name) { return document.getElementById(name); }
function tryBorder() {
    var w1 = id("part-1").style.width.replace("px", "");
    var h1 = id("part-1").style.height.replace("px", ""); 
  var l1 = id("part-1").style.left.replace("px", "");
  var t1 = id("part-1").style.top.replace("px", "");

    var w2 = id("part-2").style.width.replace("px", "");
  var h2 = id("part-2").style.height.replace("px", ""); 
  var l1 = id("part-2").style.left.replace("px", "");
  var t1 = id("part-2").style.top.replace("px", "");

  // "math" for the group size and position
  var wOverlay = l2 - w1;
  var hOverlay = t2 - h1;

  var wg = w1 + w2 - wOverlay;
  var hg = h1 + h2 - hOverlay;

  var lg = ( l1 < l2 ) ? l1 : l2;
  var tg = ( h1 < h2 ) ? h1 : h2;

  // ok, now how to I apply that math? is it easy? 
    id('group').onmouseover = function(event) {  
      alert("on mouseover");
    if (! event.shiftKey) elem.classList.add('mouseover'); 
    else elem.classList.remove('mouseover');
  }

  id('group').style.left = lg + "px";
  id('group').style.top = hg + "px";

  id('group').style.width =  width + "px";
  id('group').style.height = height + "px";
}

#group{
  border:5px solid red;
  position: relative;
  max-width: 100%;
  height: 600px;

}
.item1 {
  position: absolute;
  height: auto;
  opacity: 1;
  max-width: 100%;

}
.item2 {
  position: absolute;
  height: auto;
  opacity: 1;
  max-width: 100%;

}

.mouseover { border:1px dashed green; }

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Test</title>
</head>
<body>
<div id="group">
  <img id="part-1" class="item1" src="https://dummyimage.com/640x4:3/"> 
  <img id="part-2" class="item2" src="https://dummyimage.com/300/09f.png/fff">  
 </div>
</body>
</html>

javascript为一组绝对定位的图像应用了边框

1 个答案: