脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → jquery → jquery实现动态改变div宽度和高度

jquery实现动态改变div宽度和高度

 更新时间：2015年05月08日 10:19:07   投稿：hebedich  
这篇文章主要介绍了jquery实现动态改变div宽度和高度，效果非常不错，而且兼容性也很好，有需要的小伙伴可以参考下。

完整代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jquery动态改变div宽度和高度</title>
<script type="text/javascript" src="jquery/jquery-1.11.2.min.js"></script>
</head>
<body>
<div>
<input id="addwidthkeleyi" value="增加宽度" type="button" />
<input id="reducewidthkeleyi" value="减少宽度" type="button" />
<input id="addheightkeleyi" value="增加高度" type="button" />
<input id="reduceheightkeleyi" value="减少高度" type="button" />
 点击按钮，注意下方div宽高的变化</div>
<div style="border:1px solid #999;width:200px;height:200px" id="keleyidiv"></div>
<script type="text/javascript">
$("#addwidthke"+"leyi").on("click", function () {
$("#keleyidiv").width($("#keley" + "idiv").width() + 50);
});
$("#reducewidthk" + "eleyi").on("click", function () {
$("#keleyidiv").width($("#kel"+"eyidiv").width() - 50);
});
$("#addheightkele" + "yi").on("click", function () {
$("#kel" + "eyidiv").height($("#keleyidiv").height() + 50);
});
$("#reduceheightkeley" + "i").on("click", function () {
$("#keleyidiv").height($("#keleyidiv").height() - 50);
});
</script>
</body>
</html>

以上所述就是本文的全部内容了，希望大家能够喜欢。

您可能感兴趣的文章:

相关文章

  • jQuery+PHP实现微信转盘抽奖功能的方法

    jQuery+PHP实现微信转盘抽奖功能的方法

    这篇文章主要介绍了jQuery+PHP实现微信转盘抽奖功能的方法,详细分析了抽奖程序界面设计、前台jQuery交互、后台概率算法等抽奖功能相关技巧,需要的朋友可以参考下
    2016-05-05
  • JQuery select控件的相关操作实现代码

    JQuery select控件的相关操作实现代码

    JQuery获取和设置Select选项方法汇总如下，需要的朋友可以参考下
    2012-09-09
  • jQuery表格插件datatables用法汇总

    jQuery表格插件datatables用法汇总

    这篇文章主要介绍了jQuery表格插件datatables用法汇总，DataTables是一个非常强大的表格插件，感兴趣的小伙伴们可以参考一下
    2016-03-03
  • jquery实现图片等比例缩放以及max-width在ie中不兼容解决

    jquery实现图片等比例缩放以及max-width在ie中不兼容解决

    图片等比例缩放在某些情况下还是比较事用的,不过max-width和max-height在ie6中不兼容问题很是郁闷，接下来使用jQuery解决这个问题，感兴趣的各位可以参考下哈
    2013-03-03
  • jQuery中$.extend()用法实例

    jQuery中$.extend()用法实例

    这篇文章主要介绍了jQuery中$.extend()用法,实例分析了extend()方法的功能、定义及相关的使用技巧,需要的朋友可以参考下
    2015-06-06
  • jQuery鼠标事件汇总

    jQuery鼠标事件汇总

    鼠标事件是指用户在移动鼠标光标或者点击任意鼠标键时触发的事件,jQuery中封装了基本上所有的鼠标事件包括点击,双击,移动等鼠标事件,下面我们就来看下这些事件的语法和用法
    2015-08-08
  • JQuery控制radio选中和不选中方法总结

    JQuery控制radio选中和不选中方法总结

    这篇文章主要介绍了JQuery控制radio选中和不选中方法总结,本文起讲解了设置选中方法、设置选中和不选中示例、另一种设置选中方法、根据值设置radio选中、使用prop方法操作示例等内容,需要的朋友可以参考下
    2015-04-04
  • Jquery实现自定义tooltip示例代码

    Jquery实现自定义tooltip示例代码

    这篇文章主要介绍了Jquery实现自定义tooltip的方法,需要的朋友可以参考下
    2014-02-02
  • 了解了这些才能开始发挥jQuery的威力

    了解了这些才能开始发挥jQuery的威力

    下面介绍几个jQuery常用的方法，来让jQuery的威力发挥出来，否则只用有限的几个方法，相对于运行速度问题，真不如不用jQuery
    2013-10-10
  • jQuery实现简易的天天爱消除小游戏

    jQuery实现简易的天天爱消除小游戏

    貌似最近腾讯手机游戏天天爱消除挺火的，我也是粉丝之一，最近对javascript一直比较感兴趣然后想用js仿造一个，应该不是太难，
    2015-10-10

最新评论