盒子尺寸

jQuery提供一些方法获取尺寸。

 方法  说明
height() 获取和设置盒子的高度,不包含内边距、外边距和边框。
width() 获取和设置盒子的宽度,不包含内边距、外边距和边框。
inerHeight() 获取盒子的高度包含内边距,不包含边框和外边距。
inerWidth() 获取盒子的宽度包含内边距,不包含边框和外边距。
outerHeight() 获取盒子的高度包含内边距和边框,不包含外边距。
outerWidth() 获取盒子的宽度包含内边距和边框,不包含外边距。
outerHeight(true) 获取盒子的高度包含内边距、边框、外边距。
outerWidth(true)

获取盒子的宽度包含内边距、边框、外边距。

修改宽度示例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>修改尺寸</title>
    <script src="jquery-3.3.1.min.js"></script>
    <style>
        li{
            width: 125px;
            background-color: #ddd;
        }
    </style>
</head>
<body>
<div>
    <ul id="ul">
        <li id="a">鼠标</li>
        <li id="b">键盘</li>
        <li id="c">屏幕</li>
        <li id="d"><a>主机</a></li>
    </ul>
</div>
<button>修改尺寸</button>
<script>
    $('button').on('click',function () {
        $('#a').width('900');
        $('#b').width('80%');
        $('#d').width('150');
    });
</script>
</body>
</html>

猜你喜欢

转载自www.cnblogs.com/max-hou/p/9165940.html