web实训知识点——0416_web知识巩固宽度:width+左右内边距+左右边框+左右外边距练习1:设置div的width-CSDN博客

本文链接：https://blog.csdn.net/weixin_44766933/article/details/89422401

一、jquery尺寸：
css盒子模型
在这里插入图片描述
width（）：设置或返回元素的宽度（不包括内边距，边框，外边距）
height（）：设置或返回元素的宽度（不包括内边距，边框，外边距）
二、通过jquery获取元素的宽高：

代码实现：

<div id="div1" style="height: 200px;width: 400px;padding: 10px;border: 10px solid red;margin: 1px"></div>
<button>显示div元素的尺寸</button>
<script>
    $(document).ready(function(){
        $('button').click(function(){
            var txt=" "
            txt +="div的宽度是："+$("#div1").width()+"px"+"<br>"
            txt +="div的长度是："+$("#div1").height()+"px"+"<br>"
            txt +="div的宽度，包括内边距"+$("#div1").innerWidth()+"px"+"<br>"
            txt +="div的长度，包括内边距"+$("#div1").innerHeight()+"px"+"<br>"
            txt +="div的宽度，包括内边距和边框"+$("#div1").outerWidth()+"px"+"<br>"
            txt +="div的长度，包括内边距和边框"+$("#div1").outerHeight()+"px"+"<br>"
            txt +="div的宽度，包括内边距和外边距"+$("#div1").outerWidth(true)+"px"+"<br>"
            txt +="div的长度，包括内边距和外边距"+$("#div1").outerHeight(true)+"px"+"<br>"
            $("#div1").html(txt)
        })
    })
    </script>

三、jquery的淡出淡入
代码实现：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-1.8.3.min.js"></script>
    <style>
        #slide1,#panel{
            padding: 5px;
            text-align: center;
            background-color: #e5eecc;
            border: solid 1px #c3c3c3;
        }
        #slide2,#panel{
            padding: 5px;
            text-align: center;
            background-color: #e5eecc;
            border: solid 1px #c3c3c3;
        }
        #slide3,#panel{
            padding: 5px;
            text-align: center;
            background-color: #e5eecc;
            border: solid 1px #c3c3c3;
        }
        #panel{
            display: none;
            padding: 40px;
        }
    </style>
    <script>
        $(document).ready(function(){
            $("#slide1").click(function(){
                $("#panel").slideDown()
            })
            $("#slide2").click(function(){
                $("#panel").slideUp()
            })
            $("#slide3").click(function(){
                $("#panel").slideToggle()
            })
        })
    </script>
</head>
<body>
<div id="slide1">出现</div>
<div id="slide2">隐藏</div>
<div id="slide3">toggle</div>
<div id="panel">Hello Word</div>
</body>
</html>

四、jquery的动画总结：
show（）（打开）hide（）（关闭），toggle（）（打开再关闭交替进行）
slideUp（），slideDown（），slideToggle（），animate（），slideWindow（）（滑动窗口）