当前位置: 动力学知识库 > 问答 > 编程问答 >

javascript - Changing width of an input element using jQuery 1.7.2 vs 1.8.0+

问题描述:

There a difference in size when trying to change the width of an HTML input element when using jQuery 1.7.2 vs jQuery 1.8.0+.

<!DOCTYPE html>

<html lang="en" dir="ltr">

<head>

<meta charset="utf-8" />

<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >

<title>Width</title>

<!--<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>-->

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>

</head>

<body>

<div id="container">

<div id="letter-container">

<input type="button" value="+" class="add" id="btn"/>

</div>

<input type="button" id="change" value="Change"/>

</div>

<script type="text/javascript">

$("#change").click(function()

{

var width = 50;

$('#letter-container input').width(width).height(width);//.css('line-height', (width) + 'px');

alert($("#btn").width());

});

</script>

</body>

</html>

If I use 1.8.0+, alert($("#btn").width()) shows 50, but FireBug shows width:56px, height:68px.

If I use 1.7.2 alert($("#btn").width()) shows 32, but FireBug shows width:50px, height:50px.

Why such a difference ? I want to use the latest version of jQuery and want what 1.7.2 does. It looks like its the right one.

This is how 1.8.0+ shows :

网友答案:

This may be because it does not include padding/border. Have a look at outer width which includes padding and a border.

In addition, from jQuery 1.8 it has the understanding of box sizing.

See here: http://blog.jquery.com/2012/08/16/jquery-1-8-box-sizing-width-csswidth-and-outerwidth/

分享给朋友:
您可能感兴趣的文章:
随机阅读: