方法：
.width()、.height()内容的宽高
innerWidth()、innerHeight()包含内边距
outerWidth()、outerHeight()包含内边距和外边框
1、写参数，表示设置值
2、不写参数就是获取值
获取的都是数值类型
<body>
<input type="button" name="" value="设置" id="btn">
<div id="box"></div>
<script type="text/javascript" src="js/jquery-1.12.2.min.js"></script>
<script type="text/javascript">
---------------不要把样式和属性弄混了----------------------
// 方法：.width()、.height()
//点击按钮,获取当前元素的宽和高,再次设置元素的宽和高,设置后元素的宽和高分别是原来的宽和高2倍
// 页面加载事件
$(function () {
// 注册点击事件
$('#btn').click(function () {
/*
// ----------------------使用.css()------------------
// 获取当前元素的宽和高
var curWidth = Number.parseInt($('#box').css('width'));//因为获取的值是:100px
var curHeight = Number.parseInt($('#box').css('height'));
// 重新设置宽高
$('#box').css('width', curWidth * 2 + 'px');
$('#box').css('height', curHeight * 2 + 'px');
*/
通过元素的css()方法可以获取元素的宽和高,但是都是字符串类型
//----------------------使用.width()和.height()----------------
var curWidth = $('#box').width();
var curHeight = $('#box').height();
// 重新设置宽高
$('#box').width(curWidth * 2);
$('#box').height(curHeight * 2);
});
});
</script>
</body>
网友评论