web实训知识点0416

最新推荐文章于 2022-07-07 22:58:56 发布

一个大菠萝x

最新推荐文章于 2022-07-07 22:58:56 发布

阅读量121

点赞数

本文链接：https://blog.csdn.net/a7wkj123/article/details/89418265

版权

jQuery
1.使用jQuery来获取html元素的尺寸：
jquery尺寸：
获取尺寸 element：windth（） height（）设置或返回元素的宽高（不包括内边距、边框、或外边距）
padding ：innerwidth（）， innerheight（）
border ： outerwidth（）， outerheight（）
marigin outerwidth（true）， outerheight（true）
关于css的盒子模型：
在这里插入图片描述
使用代码实现：

<div id="div1" style="height: 200px;width: 400px;padding: 10px;border: 10px solid red;margin: 1px"></div><button>显示div元素的尺寸</button>
<script type="text/javascript">   
$(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>

在这里插入图片描述
2.jQuery的滑动动画：
jQuery slideDown()：用于向下滑动元素。
jQuery slideUp()：用于向上滑动元素。
jQuery slideToggle()：可以在 slideDown() 与 slideUp() 方法之间进行切换。

使用代码来实现上面的滑动动画：

<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(1000)
        })
        $("#slide2").click(function(){
            $("#panel").slideUp(1000)
        })
        $("#slide3").click(function(){
            $("#panel").slideToggle(1000)
        })
    })
</script>
<body>
<div id="slide1">出现</div>
<div id="slide2">隐藏</div>
<div id="slide3">toggle</div>
<div id="panel">Hello Word！</div>
</body>

一个大菠萝x

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
web实训知识点0416

<style> #slide1,#panel{ padding: 5px; text-align: center; background-color: #e5eecc; border: solid 1px #c3c3c3; } #slide2,#panel{ padding: 5px; text-al
复制链接

扫一扫