web实训知识点 0416

最新推荐文章于 2021-11-13 21:00:38 发布

inmessionante_

最新推荐文章于 2021-11-13 21:00:38 发布

阅读量92

点赞数

本文链接：https://blog.csdn.net/inmessionante_/article/details/89424146

版权

jQuery
1.使用jQuery来获取html元素的尺寸：
jquery尺寸：
获取尺寸 element：windth（） height（）设置或返回元素的宽高（不包括内边距、边框、或外边距）
padding ：innerwidth（）， innerheight（）
border ： outerwidth（）， outerheight（）
marigin outerwidth（true）， outerheight（true）
代码

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>

jQuery的滑动动画：`

<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>

inmessionante_

关注

0
点赞
踩
0

收藏

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

jQuery1.使用jQuery来获取html元素的尺寸：jquery尺寸：获取尺寸 element：windth（） height（）设置或返回元素的宽高（不包括内边距、边框、或外边距）padding ：innerwidth（）， innerheight（）border ： outerwidth（）， outerheight（）marigin outerwidth（tru...
复制链接

扫一扫