javascript - 如何通过调平动态更改宽度和高度

Question

我遇到了一些问题。当我在输入字段上写入文本时，写入文本会显示另一个文本字段。另一个文本字段的宽度和高度不会随着下图和演示站点的水平而动态变化

My Demo Site

默认宽高

但我想要这样的期望输出 Desired Output Link

对于像这些和演示站点这样的所需输出输入

我遇到了另一个问题高度显示在框的上方。但高度应显示框的左侧或右侧位置。

盒子的内孔是另一个问题，我不包括我的盒子。

最后一个问题是不要添加调平线的调平结束箭头。我的代码在下面

用于输入文本

<div class="text_input1">
    <p class="label1"> Text 1 <input class="input_box1" type="text" id="text11" name="text11" value="Enter Text1"></p>
</div>

 <div class="text_input1">
<p class="label1"> Text 2 <input class="input_box1" type="text" id="text22" name="text22" value="Enter Text2"></p>
</div>

<div class="text_input1">
<p class="label1"> Text 3 <input class="input_box1" type="text" id="text33" name="text33" value="Enter Text3"></p>
</div>

为宽高选择

</div>

<h2 class="shape_text_width">WIDTH:</h2>
<div class="iteam_icon2">

<input type="text" id="width" name="width" value="79" onchange="XX()"><p class="mili1">mm</p</input>

</div>
<h2 class="shape_text_width">HEIGHT:</h2>
<div class="iteam_icon2">

    <input type="text" id="height" name="height" value="26" onchange="XX1()"><p class="mili1">mm</p></input>

</div>

改变宽度和高度

$( "#width_label" ).text(79 + " mm");
$("#height_label" ).text( 26 + " mm");

function XX()
{
    var first2 =document.getElementById("width").value;
      var width=first2;
      var width_in_px=width*3.779527559;
      var total_width = Math.round(width_in_px);
      var f_width_in_px = parseInt(total_width);

      var mm_text="mm";

      $('#mySVG1').css("width", f_width_in_px + "px");
      $('#shape1').css("width", f_width_in_px + "px");
      $( "#width_label" ).text( width + " mm");
      $('#width_label').css("width", f_width_in_px + "px");

      var dif=width-300;
      if(width>300)
      {
      $('#height_label').css("margin-right", dif + "px");
      }

} 

 function XX1()
{
    var first22 =document.getElementById("height").value;


      var height=first22;
      var height_in_px=height*3.779527559;
      var total_height = Math.round(height_in_px);
      var f_height_in_px = parseInt(total_height);

      $('#mySVG1').css("height", f_height_in_px + "px");
      $('#shape1').css("height", f_height_in_px + "px");
      $("#height_label" ).text( height + " mm");
      $('#height_label').css("width", f_height_in_px + "px");

}

我的OutPut字段框宽高和输出文本代码如下

<div class="label_fix" id="height_label" style="border-bottom: 1px solid #000;
   width:100px;
   margin: 0 auto;
   margin-bottom: 5px;
   padding: 2px;">
</div>

<svg  style="width:300px;height:100px" id="mySVG1">
     <rect id="shape1" x="0" y="0" style="width:300px;height:100px" stroke="black" stroke-width="1px" fill="white"/>
     <<text id="text1" x="50%" y="25%" alignment-baseline="central" text-anchor="middle" fill="black"></text> 
     <<text id="text2" x="50%" y="50%" alignment-baseline="central" text-anchor="middle" fill="black"></text> 
     <<text id="text3" x="50%" y="75%" alignment-baseline="central" text-anchor="middle" fill="black"></text> 

</svg>

<div class="label_fix" id="width_label" style="border-top: 1px solid #000;
   width: 300px;
   margin: 0 auto;
   margin-top: 5px;
   padding: 2px;">
</div>

值添加到我的输出字段

<script>
$( "#text11" )
  .keyup(function(test1) {
    var value = $( this ).val();
    $( "#text1" ).text( value );
    $( "#text_second_1" ).text( value );
    $( "#text_third_1" ).text( value );

  })
</script>
<script>
$( "#text22" )
  .keyup(function(test2) {
    var value = $( this ).val();
    $( "#text2" ).text( value );
    $( "#text_second_2" ).text( value );
    $( "#text_third_2" ).text( value );

  })
</script>
<script>
$( "#text33" )
  .keyup(function(test3) {
    var value = $( this ).val();
    $( "#text3" ).text( value );
    $( "#text_second_3" ).text( value );
    $( "#text_third_3" ).text( value );

  })
</script>

Answer 1

根据您上面的评论，这是您在纯 CSS 中寻找的内容。由于您要求的图像以毫米为单位，因此我尝试使用 px 保持正确的比率，但是，您可以根据自己的喜好调整值以获得生成的结果。

您只需要一个 div 和以下样式。为了伪造“洞”，我将背景颜色应用于主体，并使用相同的颜色为 :before 和 :after 伪元素着色。

body {
  background:#ccc;
}
.box {
  box-sizing:border-box;
  background:#fff;
  width:99px;
  border-radius:5px;
  text-align:center;
  padding:7px 0;
  position:relative;
  border:1px solid #000;
  font-size:14px;
}
.box:before,
.box:after{
  content:"";
  position:absolute;
  left:5px;
  display:block;
  width:8px;
  height:8px;
  background:#ccc;
  border-radius:50%;
  top:50%;
  margin-top:-5px;
  border:1px solid #000;
}
.box:after {
  left:auto;
  right:5px;
}

这是一个工作 fiddle 。 https://jsfiddle.net/s6r6frgx/2/