如何使<input type =“ text”>比<span>宽2em

时间:2019-12-16 13:32:43

标签: javascript html css

我的HTML中有一个<span>元素,可以通过javascript更改其内容。但是,出于样式目的,我希望位于其上方的<input type="text">始终保持 2em 宽。我不介意使用JQuery。

谢谢!

编辑:我尝试过的事情:

$( document ).ready(function() {
  var tips = document.getElementById('usageTip');
  var name = document.getElementById('name');
  name.setAttribute("width", tips.style.width.valueOf + 2);
});
$( document ).ready(function() {
  var tips = document.getElementById('usageTip');
  var name = document.getElementById('name');
  name.setAttribute("width", tips.style.width.value + 2);
});
$( document ).ready(function() {
  var tips = document.getElementById('usageTip');
  var name = document.getElementById('name');
  name.setAttribute("width", tips.style.width);
});
$( document ).ready(function() {
  var tips = document.getElementById('usageTip');
  var name = document.getElementById('name');
  name.setAttribute("width", tips.width + 2);
});

请记住,CSS将name输入框的宽度指定为 width:20em; 并且未指定tips跨度(自动)。

2 个答案:

答案 0 :(得分:0)

使用jquery可以做到:

$('#name').css( "width", "calc("+$("#usageTip").width()+"px + 2em)" );

$(document).ready(function() {
  $('#resize').click(function() {
    $('#inp').css( "width", "calc("+$("#sp").width()+"px + 2em)" );
  })
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<span style="background:#faa" id="sp">Content of the span</span>
<br/>
<input type="text" id="inp">
<br/>

<input type="button" id="resize" value="resize" />

答案 1 :(得分:0)

没有Jquery演示,这是什么意思吗?

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <title>Demo</title>
</head>

<body>
	<style>
		.box_wrap {
			display: inline-block;
			box-sizing: border-box;
			padding:2rem;
			background: #f0f0f0;
		}

		.box {
			outline: none;
		}
	</style>
    <span class="box_wrap">
        <input type="text" id="box" class="box"/>
    </span>
    <script>
	var input = document.querySelector("#box");
	var widht = 20;

    input.style.width = widht + "em";
    </script>
</body>

</html>