我的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
跨度(自动)。
答案 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>