如何根据js中的父位置动态调整div的大小

2024-01-03

我一直在编写一个代码，该代码展示了如何动态调整 div 的大小。然而，代码被困在 1 个元素上，我做了一些工作来转换为多个 div 调整器。

现在，在调整大小时，鼠标和 div 之间会出现一个空格，我的目标是确保根据父位置，使用精确的鼠标位置单独调整每个元素的大小。任何能改变我观点的方法都会受到赞赏。不绑定到调整大小节点，而是直接保存 div 边框也是可能的。

到目前为止我所取得的成就：

- 使多个 div 可通过鼠标位置调整大小。

-在函数中保存第一个位置信息。

- 计算出孩子和父母之间的差异。

我想实现的目标：

- 确保在调整大小时支架保持在鼠标位置下方，鼠标和 div 之间没有任何空间。

经过几次尝试调整大小后，我发现出现了由父元素边距、填充等引起的空格。 div 开始调整大小，并在 div 和鼠标位置之间留出一个空格。

我需要一个计算中的递归解决方案来正确调整 div 的大小和重新定位。

可能是另一种方法可以用于仅计算父级内部的x，y，w，h，但我需要一些关于如何用鼠标实现这一点的解释......

function resizeable() {
  var resizers = document.querySelectorAll('.n, .s, .w, .e, .nw, .ne, .se, .sw');
  const min = 40;
  for (let i = 0; i < resizers.length; i++) {
    const currentResizer = resizers[i];
    const element = currentResizer.parentElement;
    const parent = currentResizer.parentElement.parentElement;
    let p;
    let c;
    let original_w = 0;
    let original_h = 0;
    let parent_x = 0;
    let parent_y = 0;
    let child_x = 0;
    let child_y = 0;
    let mouse_x = 0;
    let mouse_y = 0;
    let scale_x = 0;
    let scale_y = 0;
    // Mouse events
    currentResizer.addEventListener('mousedown', function(e) {
      first(e);
      document.addEventListener('mousemove', resize);
      document.addEventListener('mouseup', stopResize);
      e.preventDefault();
    });
    // Log
    function log(e){
      var str = 'original_w['+original_w+'] original_h['+original_h+'] \n'+
                'parent_x['+parent_x+'] parent_y['+parent_y+'] \n'+
                'child_x['+child_x+'] child_y['+child_y+'] \n'+
                'scale_x['+scale_x+'] scale_y['+scale_y+'] \n'+
                'mouse_x['+mouse_x+'] mouse_y['+mouse_y+'] \n'+
                'e.pageX['+e.pageX+'] e.pageY['+e.pageY+'] \n'+
                'obj.left['+element.style.left+'] obj.top['+element.style.top+']';
      console.log(str);
      /**/
      str = '<table>'+
          '<tr>'+
            '<th colspan="2">First Locations:</td>'+
          '</tr>'+
          '<tr>'+
            '<td>original_w['+original_w+']</td>'+
            '<td>original_h['+original_h+']</td>'+
          '</tr>'+
          '<tr>'+
            '<td>parent_x['+parent_x+']</td>'+
            '<td>parent_y['+parent_y+']</td>'+
          '</tr>'+
          '<tr>'+
            '<td>child_x['+child_x+']</td>'+
            '<td>child_y['+child_y+']</td>'+
          '</tr>'+
          '<tr>'+
            '<td>scale_x['+scale_x+']</td>'+
            '<td>scale_y['+scale_y+']</td>'+
          '</tr>'+
          '<tr>'+
            '<td>mouse_x['+mouse_x+']</td>'+
            '<td>mouse_y['+mouse_y+']</td>'+
          '</tr>'+
          '<tr>'+
            '<td>e.pageX['+e.pageX+']</td>'+
            '<td>e.pageY['+e.pageY+']</td>'+
          '</tr>'+
          '<tr>'+
            '<td>obj.left['+element.style.left+']</td>'+
            '<td>obj.top['+element.style.top+']</td>'+
          '</tr>'
      '</table>';
      var m = document.getElementById("nfo"); // Debug element
      m.innerHTML = str;
    }
    // First location & width
    function first(e) {
      c = element.getBoundingClientRect();
      child_y = c.top;
      child_x = c.left;
      p = parent.getBoundingClientRect();
      parent_y = p.top;
      parent_x = p.left;
      original_w = parseFloat(c.width).toFixed(2);
      original_h = parseFloat(c.height).toFixed(2);
      scale_y = parseFloat(c.height / element.offsetHeight).toFixed(2);
      scale_x = parseFloat(c.width / element.offsetWidth).toFixed(2);
      mouse_y = e.pageY;
      mouse_x = e.pageX;
      log(e);
    }
    // Resize process
    function resize(e) {
      element.style.position = "absolute";
      if (currentResizer.classList.contains('se')) {
        const width = e.pageX - child_x;
        const height = e.pageY - child_y;
        if (width > min) {
          element.style.width = (width / scale_x) + 'px';
        }
        if (height > min) {
          element.style.height = (height / scale_y) + 'px';
        }
      }
      else if (currentResizer.classList.contains('sw')) {
        const width = original_w - (e.pageX - child_x);
        const height = e.pageY - child_y;
        if (height > min) {
          element.style.height = (height / scale_y) + 'px';
        }
        if (width > min) {
          element.style.left = e.pageX - parent_x + 'px';
          element.style.width = (width / scale_x) + 'px';
        }
      }
      else if (currentResizer.classList.contains('ne')) {
        const width = e.pageX - child_x;
        const height = original_h - (e.pageY - mouse_y);
        if (width > min) {
          element.style.width = (width / scale_x) + 'px';
        }
        if (height > min) {
          element.style.height = (height / scale_y) + 'px';
          element.style.top =  e.pageY - parent_y + 'px';
        }
      }
      else if (currentResizer.classList.contains('nw')) {
        const width = original_w - (e.pageX - child_x);
        const height = original_h - (e.pageY - mouse_y);
        if (width > min) {
          element.style.left = e.pageX - parent_x + 'px';
          element.style.width = (width / scale_x) + 'px';
        }
        if (height > min) {
          element.style.height = (height / scale_y) + 'px';
          element.style.top = e.pageY - parent_y + 'px';
        }
      }
      else if (currentResizer.classList.contains('e')) {
        const width = e.pageX - child_x;
        if (width > min) {
          element.style.width = (width / scale_x) + 'px';
        }
      }
      else if (currentResizer.classList.contains('s')) {
        const height = e.pageY - child_y;
        if (height > min) {
          element.style.height = (height / scale_y) + 'px';
        }
      }
      else if (currentResizer.classList.contains('w')) {
        const width = original_w - (e.pageX - child_x);
        if (width > min) {
          element.style.width = (width / scale_x) + 'px';
          element.style.left = (e.pageX - parent_x) + 'px';
        }
      }
      else if (currentResizer.classList.contains('n')) {
        const height = original_h - (e.pageY - mouse_y);
        if (height > min) {
          element.style.height = (height / scale_y) + 'px';
          element.style.top = e.pageY - parent_y + 'px';
        }
      }
      log(e);
    }
    // When mouse released stop
    function stopResize(e) {
      first(e);
      document.removeEventListener('mousemove', resize);
    }
  }
}
resizeable();

.another_element_on_the_way {
  position: relative;
  width: 100px;
  height: 100px;
  float: left;
}
#nfo {
  position: relative;
  float: left;
}
div {
  position: absolute;
  background-color: grey;
}
.holder {
  float: left;
  clear: left;
  position: relative;
  margin: 20px;
  width: 550px;
  height: 600px;
}
.scaled:hover:before, .regular:hover:before {
  content: '';
  position: absolute;
  top: -3px;
  left: -3px;
  width: calc(100% - 6px);
  height: calc(100% - 6px);
  border: 6px solid #ccc;
}
.regular:nth-child(1){
  top: 5px;
  left: 5px;
  width: 120px;
  height: 120px;
  background-color: red;
}
.regular:nth-child(3){
  top: 270px;
  left: 60px;
  width: 240px;
  height: 180px;
  background-color: blue;
}
.scaled {
  top: 150px;
  left: 25px;
  width: 160px;
  height: 160px;
  transform: scale(0.6) translate(0, 0);
  transform-origin: top left 0px;
  background-color: green;
  overflow: visible;
}
.previewHeader {
  position: absolute;
  top: 10px;
  left: 10px;
  background-color: #eee;
  border: 1px solid #dedede;
}
.n, .s, .w, .e, .nw, .ne, .se, .sw {
  position: absolute;
  width: 18px;
  height: 18px;
  border: 1px solid grey;
  border-radius: 20px;
  background-color: #fff;
}
.n:hover, .s:hover, .w:hover, .e:hover,
.nw:hover, .ne:hover, .se:hover, .sw:hover {
  background-color: red;
}
.nw {
  top: -10px;
  left: -10px;
  cursor: nw-resize;
}
.ne {
  top: -10px;
  left: calc(100% - 10px);
  cursor: ne-resize;
}
.sw {
  top: calc(100% - 10px);
  left: -10px;
  cursor: sw-resize;
}
.se {
  top: calc(100% - 10px);
  left: calc(100% - 10px);
  cursor: se-resize;
}
.n {
  top: -10px;
  left: calc(50% - 10px);
  cursor: n-resize;
}
.w {
  top: calc(50% - 10px);
  left: -10px;
  cursor: w-resize;
}
.e {
  top: calc(50% - 10px);
  left:  calc(100% - 10px);
  cursor: e-resize;
}
.s {
  top: calc(100% - 10px);
  left: calc(50% - 10px);
  cursor: s-resize;
}

<div class="another_element_on_the_way">
</div>
<div class="another_element_on_the_way">
</div>
<div class="another_element_on_the_way">
</div>
<div class="another_element_on_the_way">
</div>
<div class="another_element_on_the_way">
</div>
<div class="another_element_on_the_way">
</div>
<div class="holder">
  <div class="regular">
      <div class="previewHeader">Resizable</div>
      <div class="nw"></div>
      <div class="ne"></div>
      <div class="sw"></div>
      <div class="se"></div>
      <div class="n"></div>
      <div class="s"></div>
      <div class="w"></div>
      <div class="e"></div>
  </div>
  <div class="scaled">
    <div class="previewHeader">Scaled</div>
    <div class="nw"></div>
    <div class="ne"></div>
    <div class="sw"></div>
    <div class="se"></div>
    <div class="n"></div>
    <div class="s"></div>
    <div class="w"></div>
    <div class="e"></div>
  </div>
  <div class="regular">
    <div class="previewHeader">Resizable</div>
    <div class="nw"></div>
    <div class="ne"></div>
    <div class="sw"></div>
    <div class="se"></div>
    <div class="n"></div>
    <div class="s"></div>
    <div class="w"></div>
    <div class="e"></div>
  </div>
</div>
<div id="nfo"> X & Y</div>

还有一个 codepen 可以更清楚地显示它：https://codepen.io/BerkerYuceer/pen/gOYwqdb https://codepen.io/BerkerYuceer/pen/gOYwqdb

你可以使用getComputedStyle得到transform使用正则表达式获取值并应用1 / scale值到所需的坐标。我只能解决这个问题East支架（我对坐标几何太笨了：P）：

let match = getComputedStyle(element)
           .transform.match(/matrix\((-?\d*\.?\d+),\s*0,\s*0,\s*(-?\d*\.?\d+),\s*0,\s*0\)/);
let scale = 1; //for .regular folks
if (match && +match[1] != 0)
   scale = 1 / +match[1]; //because we need to unapply the transformation

Sample:

function resizeable() {
  var resizers = document.querySelectorAll('.n, .s, .w, .e, .nw, .ne, .se, .sw');
  const min = 40;
  for (let i = 0; i < resizers.length; i++) {
    const currentResizer = resizers[i];
    const element = currentResizer.parentElement;
    const parent = currentResizer.parentElement.parentElement;
    let p;
    let c;
    let original_w = 0;
    let original_h = 0;
    let parent_x = 0;
    let parent_y = 0;
    let child_x = 0;
    let child_y = 0;
    let mouse_x = 0;
    let mouse_y = 0;
    let scale_x = 0;
    let scale_y = 0;
    let scroll_x = 0;
    let scroll_y = 0;
    // Mouse events
    currentResizer.addEventListener('mousedown', function(e) {
      first(e);
      document.addEventListener('mousemove', resize);
      document.addEventListener('mouseup', stopResize);
      e.preventDefault();
    });
    // Log
    function log(e){
      var str = 'original_w['+original_w+'] original_h['+original_h+'] \n'+
                'parent_x['+parent_x+'] parent_y['+parent_y+'] \n'+
                'scroll_x['+scroll_x+'] scroll_y['+scroll_y+'] \n'+
                'child_x['+child_x+'] child_y['+child_y+'] \n'+
                'scale_x['+scale_x+'] scale_y['+scale_y+'] \n'+
                'mouse_x['+mouse_x+'] mouse_y['+mouse_y+'] \n'+
                'e.pageX['+e.pageX+'] e.pageY['+e.pageY+'] \n'+
                'obj.left['+element.style.left+'] obj.top['+element.style.top+']';
      console.log(str);
      /**/
      str = '<table>'+
          '<tr>'+
            '<th colspan="2">First Locations:</td>'+
          '</tr>'+
          '<tr>'+
            '<td>original_w['+original_w+']</td>'+
            '<td>original_h['+original_h+']</td>'+
          '</tr>'+
          '<tr>'+
            '<td>parent_x['+parent_x+']</td>'+
            '<td>parent_y['+parent_y+']</td>'+
          '</tr>'+
          '<tr>'+
            '<td>scroll_x['+scroll_x+']</td>'+
            '<td>scroll_y['+scroll_y+']</td>'+
          '</tr>'+
          '<tr>'+
            '<td>child_x['+child_x+']</td>'+
            '<td>child_y['+child_y+']</td>'+
          '</tr>'+
          '<tr>'+
            '<td>scale_x['+scale_x+']</td>'+
            '<td>scale_y['+scale_y+']</td>'+
          '</tr>'+
          '<tr>'+
            '<td>mouse_x['+mouse_x+']</td>'+
            '<td>mouse_y['+mouse_y+']</td>'+
          '</tr>'+
          '<tr>'+
            '<td>e.pageX['+e.pageX+']</td>'+
            '<td>e.pageY['+e.pageY+']</td>'+
          '</tr>'+
          '<tr>'+
            '<td>obj.left['+element.style.left+']</td>'+
            '<td>obj.top['+element.style.top+']</td>'+
          '</tr>'
      '</table>';
      var m = document.getElementById("nfo"); // Debug element
      m.innerHTML = str;
    }
    // First location & width
    function first(e) {
      c = element.getBoundingClientRect();
      child_y = c.top;
      child_x = c.left;
      p = parent.getBoundingClientRect();
      parent_y = p.top;
      parent_x = p.left;
      scroll_y = window.scrollY;
      scroll_x = window.scrollX;
      original_w = parseFloat(c.width).toFixed(2);
      original_h = parseFloat(c.height).toFixed(2);
      scale_y = parseFloat(c.height / element.offsetHeight).toFixed(2);
      scale_x = parseFloat(c.width / element.offsetWidth).toFixed(2);
      mouse_y = e.pageY - scroll_y;
      mouse_x = e.pageX - scroll_x;
      log(e);
    }
    // Resize process
    function resize(e) {
      element.style.position = "absolute";
      if (currentResizer.classList.contains('se')) {
        const width = e.pageX - scroll_x - child_x ;
        const height = e.pageY - scroll_y - child_y ;
        if (width > min) {
          element.style.width = (width / scale_x) + 'px';
        }
        if (height > min) {
          element.style.height = (height / scale_y) + 'px';
        }
      }
      else if (currentResizer.classList.contains('sw')) {
        const width = original_w - (e.pageX - scroll_x - child_x);
        const height = e.pageY - scroll_y - child_y;
        if (height > min) {
          element.style.height = (height / scale_y) + 'px';
        }
        if (width > min) {
          element.style.left = e.pageX - scroll_x - parent_x + 'px';
          element.style.width = (width / scale_x) + 'px';
        }
      }
      else if (currentResizer.classList.contains('ne')) {
        const width = e.pageX - child_x - scroll_x;
        const height = original_h - (e.pageY - mouse_y - scroll_y);
        if (width > min) {
          element.style.width = (width / scale_x)  + 'px';
        }
        if (height > min) {
          element.style.height = (height / scale_y) + 'px';
          element.style.top =  e.pageY - parent_y - scroll_y + 'px';
        }
      }
      else if (currentResizer.classList.contains('nw')) {
        const width = original_w - (e.pageX - scroll_x - child_x);
        const height = original_h - (e.pageY - scroll_y - mouse_y);
        if (width > min) {
          element.style.left = e.pageX - parent_x - scroll_x + 'px';
          element.style.width = (width / scale_x) + 'px';
        }
        if (height > min) {
          element.style.height = (height / scale_y) + 'px';
          element.style.top = e.pageY - parent_y - scroll_y + 'px';
        }
      }
      else if (currentResizer.classList.contains('e')) {
        const width = e.pageX - scroll_x - child_x;
        if (width > min) {
          element.style.width = (width / scale_x) + 'px';
        }
      }
      else if (currentResizer.classList.contains('s')) {
        const height = e.pageY - scroll_y - child_y;
        if (height > min) {
          element.style.height = (height / scale_y) + 'px';
        }
      }
      else if (currentResizer.classList.contains('w')) {
        const width = original_w - (e.pageX - scroll_x - child_x);
        if (width > min) {
          element.style.width = (width / scale_x) + 'px';
          element.style.left = (e.pageX - scroll_x - parent_x) + 'px';
        }
      }
      else if (currentResizer.classList.contains('n')) {
        const height = original_h - (e.pageY - scroll_y - mouse_y);
        if (height > min) {
          element.style.height = (height / scale_y) + 'px';
          element.style.top = e.pageY - scroll_y - parent_y + 'px';
        }
      }
      log(e);
    }
    // When mouse released stop
    function stopResize(e) {
      first(e);
      document.removeEventListener('mousemove', resize);
    }
  }
}
resizeable();

body {
  width: 1200px;
}
.another_element_on_the_top {
  position: relative;
  float: left;
  margin: 10px;
  width: 100px;
  height: 100px;
}
.another_element_on_the_left {
  position: relative;
  float: left;
  clear: left;
  margin: 10px;
  width: 100px;
  height: 100px;
}
#nfo {
  position: relative;
  float: left;
}
div {
  position: absolute;
  background-color: grey;
}
.holder {
  float: left;
  position: relative;
  margin: -470px 20px 20px 20px;
  width: 550px;
  height: 600px;
}
.scaled:hover:before, .regular:hover:before {
  content: '';
  position: absolute;
  top: -3px;
  left: -3px;
  width: calc(100% - 6px);
  height: calc(100% - 6px);
  border: 6px solid #ccc;
}
.regular:nth-child(1){
  top: 5px;
  left: 5px;
  width: 120px;
  height: 120px;
  background-color: red;
}
.regular:nth-child(3){
  top: 270px;
  left: 60px;
  width: 240px;
  height: 180px;
  background-color: blue;
}
.scaled {
  top: 150px;
  left: 25px;
  width: 160px;
  height: 160px;
  transform: scale(0.6) translate(0, 0);
  transform-origin: top left 0px;
  background-color: green;
  overflow: visible;
}
.previewHeader {
  position: absolute;
  top: 10px;
  left: 10px;
  background-color: #eee;
  border: 1px solid #dedede;
}
.n, .s, .w, .e, .nw, .ne, .se, .sw {
  position: absolute;
  width: 18px;
  height: 18px;
  border: 1px solid grey;
  border-radius: 20px;
  background-color: #fff;
}
.n:hover, .s:hover, .w:hover, .e:hover,
.nw:hover, .ne:hover, .se:hover, .sw:hover {
  background-color: red;
}
.nw {
  top: -10px;
  left: -10px;
  cursor: nw-resize;
}
.ne {
  top: -10px;
  left: calc(100% - 10px);
  cursor: ne-resize;
}
.sw {
  top: calc(100% - 10px);
  left: -10px;
  cursor: sw-resize;
}
.se {
  top: calc(100% - 10px);
  left: calc(100% - 10px);
  cursor: se-resize;
}
.n {
  top: -10px;
  left: calc(50% - 10px);
  cursor: n-resize;
}
.w {
  top: calc(50% - 10px);
  left: -10px;
  cursor: w-resize;
}
.e {
  top: calc(50% - 10px);
  left:  calc(100% - 10px);
  cursor: e-resize;
}
.s {
  top: calc(100% - 10px);
  left: calc(50% - 10px);
  cursor: s-resize;
}

<div class="another_element_on_the_top">
</div>
<div class="another_element_on_the_top">
</div>
<div class="another_element_on_the_top">
</div>
<div class="another_element_on_the_top">
</div>
<div class="another_element_on_the_top">
</div>
<div class="another_element_on_the_top">
</div>
<div class="another_element_on_the_top">
</div>
<div class="another_element_on_the_top">
</div>
<div class="another_element_on_the_top">
</div>
<div class="another_element_on_the_top">
</div>

<div class="another_element_on_the_left">
</div>
<div class="another_element_on_the_left">
</div>
<div class="another_element_on_the_left">
</div>
<div class="another_element_on_the_left">
</div>
<div class="another_element_on_the_left">
</div>

<div class="holder">
  <div class="regular">
      <div class="previewHeader">Resizable</div>
      <div class="nw"></div>
      <div class="ne"></div>
      <div class="sw"></div>
      <div class="se"></div>
      <div class="n"></div>
      <div class="s"></div>
      <div class="w"></div>
      <div class="e"></div>
  </div>
  <div class="scaled">
    <div class="previewHeader">Scaled</div>
    <div class="nw"></div>
    <div class="ne"></div>
    <div class="sw"></div>
    <div class="se"></div>
    <div class="n"></div>
    <div class="s"></div>
    <div class="w"></div>
    <div class="e"></div>
  </div>
  <div class="regular">
    <div class="previewHeader">Resizable</div>
    <div class="nw"></div>
    <div class="ne"></div>
    <div class="sw"></div>
    <div class="se"></div>
    <div class="n"></div>
    <div class="s"></div>
    <div class="w"></div>
    <div class="e"></div>
  </div>
</div>
<div id="nfo"> X & Y</div>

或通过使用this https://stackoverflow.com/a/26893663/4051471另一个问题中的方法。

   var element = document.querySelector('...');
   var scaleX = element.getBoundingClientRect().width / element.offsetWidth;

“这是有效的，因为 getBoundingClientRect 返回实际尺寸而 offsetWidth/Height 是未缩放的尺寸。”

Edit:添加了 window.scrollX/Y。现在它可以在滚动页面中使用。

为了将来在页面的任何部分进行参考，它都可以正常工作。即使对象被缩放。

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

javascript

html

css

resize

如何根据js中的父位置动态调整div的大小的相关文章

如何正确关闭 Node.js Express 服务器？

我需要在收到回调后关闭服务器 auth github callback网址与平常一样HTTP API http nodejs org docs latest api http html关闭服务器目前支持server close call
jQuery 问题：它的真正含义是什么？

function window undefined jquery code jQuery window 它到底意味着什么是不是也意味着 document ready 或者只是两种不同的东西已经有两个答案但这是我对代码缺失端的猜测 fu
Javascript 访问 Disqus 评论文本框？

我正在开发一个浏览器扩展它应该允许我访问文本框中的评论帖子现在很多网站都使用 Disqus 作为评论方式但在输入文本时我无法找到访问 Disqus 评论框的方法 Disqus API 也没有透露太多信息有人知道访问它的方法吗解决
html输入数字，min + step，使step忽略min？

是否有可能使step忽略min属性
Niceedit本地上传图片失败

我是这样称呼编辑的 new nicEditor buttonList bold italic underline upload iconsPath img nicedit png uploadURI http server com inte
NodeJS 中的缩进多行日志记录

我要打印JSON stringify d 反对控制台将上下文作为 Mocha 测试套件输出的一部分当测试缩进时我希望对象日志行向右缩进足够远例如 3 4 个制表符空格以便它们可以识别地位于右侧describe group 我怎样才
在 HTML5 画布上创建颜色选择器

如何在 HTML5 画布上绘制颜色选择器一个基本的例子是使用getImageData http jsfiddle net eGjak 60 http jsfiddle net eGjak 60 var ctx cv get 0 getCo
如何在javascript中解析 yyyy-MM-dd HH:mm:ss.SSS 格式的日期？

const time 2016 11 16 00 00 00 000 const date new Date time console info date 似乎 safari 无法解析 yyyy MM dd HH mm ss SSS 格式日
JQuery Mobile - 内联显示 HTML 表单

Goal 在 Jquery Mobile 中的同一行显示文本框和提交按钮 Problem 它们不会显示在同一行我曾多次尝试在同一行显示文本框和提交按钮但它从未起作用这是我的代码和我使用的组合
jVectorMap - 向下钻取地图 - 自定义背景

我正在使用 jVectorMap 中的向下钻取地图并且尝试将自定义背景颜色设置为地图的第二层为了自定义主级别我使用 main 参数但我不知道如何将其扩展到地图的较低级别提前致谢马切伊 None
如何将外部 div 的高度设置为始终等于特定内部 div 的高度？

我有一个外部 div 其中包含三个内部 div 我希望最左边的内部 div 始终确定外部 div 的高度如果其他内部 div 的内容比最左边的 div 少它们将有空白空间如果他们有更多的内容比最左边的div 他们将得到一个滚动条
如何在 Bootstrap 4 轮播中堆叠多个图像

我不知道如何使用 Bootstrap 4 以及如何在一张幻灯片中显示多个小图像例如缩略图而不是让图像填充轮播的宽度我已经使用下面的代码尝试了一些操作但仍然无法堆叠很多图像 div class container h2 class t
当内部图像缩放时，包裹 div 不会调整大小（窗口大小调整的结果）

我希望我的图像随着窗口高度的变化而调整大小同时保持包含的 div 收缩包裹图像我尝试使用 div img src http akamaicovers oreilly com images 9780596806767 cat gif al
更改 CSS 样式表的选择器属性

以下是我们传统上如何更改重复元素的样式将样式应用到每个元素 function changeStyle selector prop val var elems document querySelectorAll selector Array
☺ 不在移动版本中呈现

我如何获得特殊角色笑脸在移动浏览器中正确呈现 li a href http goo gl GjxlI title target blank span style font size 20px span a li 它在大多数浏览器上显示为
为什么对于整数键，“Map”操作比 JavaScript (v8) 中的“Object”慢得多？

我很高兴使用Map对于在我的 JavaScript 代码库中随处访问的索引但我刚刚偶然发现了这个基准 https stackoverflow com a 54385459 365104 https stackoverflow com a
网页执行回发时如何停止在注册表单上？

我正在做我的最后一年的项目其中我在一页上有登录和注册表单 WebForm 当用户点击锚点时Sign Up下拉菜单ddlType 隐藏和文本框 txtCustName txtEmail and txtConfirmPassword 显示
Ie11 不应用媒体查询样式

IE11 忽略我的媒体查询并始终使用移动 CSS 奇怪的是如果我改变浏览器宽度即使只是 1 2 像素浏览器也会自行渲染并显示媒体查询我尝试了 css lint 我的 css 中没有错误我的CSS没有什么特别的只是简单的 css
当 jQuery .remove() 用于删除脚本标签时，它是否会清除加载的 JavaScript？

正如标题所示如果我使用以下命令从 DOM 中删除脚本标签 scriptid remove javascript 本身是保留在内存中还是被清除了或者我完全误解了浏览器处理 javascript 的方式吗这是很有可能的对于那些对我提问
相当于 JavaScript 中 Ruby 的each_cons

许多语言都曾提出过这个问题但 javascript 却没有 Ruby 有方法Enumerable each cons https devdocs io ruby 2 5 enumerable method i each cons看起来像这

随机推荐

fp.readlines() 是否关闭文件？

在 python 中当我稍后在程序中尝试访问 fp 时我看到 fp readlines 正在关闭文件的证据您能否确认此行为如果我还想再次读取该文件是否需要稍后重新打开该文件文件关闭了吗 https stackoverflow c
Material UI v4 AppBar 不会更改主题

我有 Appbar 在 MUI v4 中
匹配任何数字的正则表达式模式包括 1-9 除 2

我需要一个正则表达式模式来匹配任何数字包括 1 9 数字除了 2 我的尝试 1 9 2 但这对我不起作用另一种方法 D2 这意味着不是非数字或 2
TypeORM 创建表后插入基本主数据（类型、状态等）

我有问题想问你我正在使用 NestJS 和 typeORM 我试图在创建表后将默认值插入到表中例如我有一个优先级表我需要插入高中低值我尝试了 typeorm 和 NestJS 文档中的所有内容并从这里阅读了相关问题和答案我
如何使用 testng.xml 从大型 TestNG 套件执行一项测试？

我有一个包含大量方法的 TestNG 套件我使用构建在 TestNG 运行器之上的包装器来执行该套件除了一个之外套件中的所有测试均失败我应该在 testng xml 中编写什么来执行那个失败的测试明显的解决方案是为所有方法分配唯一
svnserve VS mod_dav_svn

我们计划在网络本身相当慢的环境中安装 Subversion 存储库之前在那里使用的VCS是VSS 使用它简直就是一场噩梦不仅仅是因为它的特性所以我的问题是 Svnserve 和 apache 模块之间的选择我知道由于无状态协议
ASP.NET MVC 是否已准备好用于业务应用程序（集成第 3 方控件/组件）？

我的公司已经开发并且仍在继续开发一个大型 ASP NET 业务应用程序我们的平台是 ASP NET 2 0 使用一些 ASP NET Ajax 是广泛使用第三方组件如网络网格组合框树视图日历和日程安排控件等现在我对 ASP
使用linq生成直接更新而不需要select

大家好我仍在学习 LINQ 所以如果这很幼稚请原谅我当您直接处理 SQL 时您可以生成带有条件的更新命令而无需运行 select 语句当我使用 linq 时我似乎遵循以下模式选择实体修改实体提交更改我想做的是使用 li
为什么允许从一个构造函数调用另一个构造函数？

我正在查看有关 SO 的其他问题但我没有真正看到我的问题的解释我读到从另一个构造函数调用构造函数使用 this 关键字是valid 但我不明白why这是有效的以前我认为每个对象只能有一个构造函数构造函数链接似乎打破了这一逻辑
PostgreSQL 删除触发器

我正在 PGAdminIII 上创建一个触发器我想在其中删除另一个表上具有外键的行但是我遇到了语法错误并且找不到问题所在 CREATE TRIGGER clienteDelete BEFORE DELETE ON cliente FO
OCR应用前的图像清理

过去几个小时我一直在尝试 PyTesser 它是一个非常好的工具关于 PyTesser 的准确性我注意到以下几点包含图标图像和文本的文件准确度 5 10 仅包含文本的文件已删除图像和图标准确率 50 60 拉伸文件这是最好的
打印带有演示者备注的 xaringan 幻灯片

是否可以打印带有演示者备注的 Xaringan 幻灯片我知道我可以使用这些方法打印幻灯片 https github com yihui xaringan wiki Export Slides to PDF https github com
如何将 Leiningen 模板部署到 Clojars？

我在本地计算机上创建了一个 Leiningen 项目然后通过执行以下操作将其转换为模板 lein create template webdb 然后我安装模板 cd webdb lein install 这允许我在本地基于模板创建项目 le
缺乏后视的解决方法？

回答另一位用户的问题 https stackoverflow com q 28044217 3725745我将下面的正则表达式组合在一起来匹配字符串中的数字 b 0 9 0 9 b 在提供答案后我注意到如果由于 b 与句点字符匹配而导致
GSON 2.0+ 从两个不同的序列化字段名称之一反序列化字段

在我的 Java 类中我有一个声明如下的字段 protected double a 0 0 在反序列化以重构此类的 JSON 中该字段可以显示为两个不同名称之一遗留问题例如 JSON 字段可能如下所示 a 9 57 或者像这样 d
获取指向字节数组的指针的不安全方法

此行为在 C 中有效吗 public class MyClass private byte data public MyClass this data new byte 1024 public unsafe byte getData byt
Scrapy 和 Python。名称错误

我正在尝试计算当前的货币汇率请您看一下是否发现错误 items py import scrapy class CurrItem scrapy Item country scrapy Field currency scrapy Field
如何使用系统属性替换 Typesafe 配置文件中的占位符？

我需要参考java io tmpdir在我的 application conf 文件中我打印了我的配置内容 val c ConfigFactory load System err println c root render 它使它像 de
R 上下文、环境和带有“.Call”的调用堆栈

有版本吗parent frame or sys calls或其他可以直接从 C 代码调用的通用上下文函数 Call 环顾四周Rinternals h等等我似乎找不到类似的东西我能想到的最好的办法是 my fun lt function
如何根据js中的父位置动态调整div的大小

我一直在编写一个代码该代码展示了如何动态调整 div 的大小然而代码被困在 1 个元素上我做了一些工作来转换为多个 div 调整器现在在调整大小时鼠标和 div 之间会出现一个空格我的目标是确保根据父位置使用精确的鼠标位置

如何根据js中的父位置动态调整div的大小

如何根据js中的父位置动态调整div的大小 的相关文章

随机推荐

热门标签

如何根据js中的父位置动态调整div的大小的相关文章