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

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;
}

这是一个工作小提琴。 https://jsfiddle.net/s6r6frgx/2/