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>

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

赞 (0)

相关推荐

  • js/jquery获取浏览器窗口可视区域高度和宽度以及滚动条高度实现代码

    获取浏览器窗口的可视区域高度和宽度,滚动条高度有需要的朋友可参考一下.IE中,浏览器显示窗口大小只能以下获取: 代码如下复制代码 复制代码 代码如下: document.body.offsetWidth document.body.offsetHeight 在声明了DOCTYPE的浏览器中,可以用以下来获取浏览器显示窗口大小: 代码如下复制代码 复制代码 代码如下: document.documentElement.clientWidth document.documentElement.cli

  • jQuery获取页面及个元素高度、宽度的总结——超实用

    下面把jQuery获取页面及个元素高度.宽度的方法汇总,分享给大家. 获取浏览器显示区域(可视区域)的高度 : 复制代码 代码如下: $(window).height(); 获取浏览器显示区域(可视区域)的宽度 : 复制代码 代码如下: $(window).width(); 获取页面的文档高度 复制代码 代码如下: $(document).height(); 获取页面的文档宽度 : 复制代码 代码如下: $(document).width(); 浏览器当前窗口文档body的高度: 复制代码 代码

  • 使用jquery获取网页中图片高度的两种方法

    使用jquery获取网页中图片的高度其实很简单,有两种常用的方法都可以打到我们的目的 复制代码 代码如下: $("img").whith();(返回纯数字) $("img").css("width");(返回字符串:数字+"px") 但是有时候会遇到返回0的情况,上面方法返回值竟然是0或者0px,很让人诧异 方法一 在很早之前,我使用的解决方法,这也是我的师傅告诉我的解决方法:在你需要获取到的图片的<img>标签上

  • jquery获取文档高度和窗口高度汇总

    jquery获取窗口高度和窗口高度,$(document).height().$(window).height() $(document).height():整个网页的文档高度 $(window).height():浏览器可视窗口的高度 $(window).scrollTop():浏览器可视窗口顶端距离网页顶端的高度(垂直偏移) $(document.body).height();//浏览器当前窗口文档body的高度 $(document.body).outerHeight(true);//浏览

  • js和jquery如何获取图片真实的宽度和高度

    1.什么时候需要获取图片真实的宽度和高度 在做pc网页的时候,有时候会考虑按照插入的图片的尺寸来判断图片是横图还是竖图.然后判断过后给予不同的展示方式! 另外一种就是在手机页面上,在新闻页插入的图片往往都是按照图片的原尺寸来展示,如果手机屏幕太小,太大的图就会超出去!这时候有两种解决办法 1)给所有的图片加上这样的样式 1 复制代码 代码如下: .news img{margin:5px auto; display:block;width:100%; height:auto;} 但是这种方式有另外

  • JQuery获取浏览器窗口内容部分高度的代码

    JQuery获取浏览器窗口内容部分高度的代码

    下面是测试代码,记得先引用JQuery库 复制代码 代码如下: <script type="text/javascript"> $(document).ready( function() { var h = $(window).height(); alert(h); } ) </script> Firefox下: IE下: 可以发现它获取的却是是窗口的内容部分高度,而不是浏览器窗口的高度.Oh Yeah!

  • jquery实现在页面加载完毕后获取图片高度或宽度

    日前,本技术屌丝又遇到了一个很有意思的问题,应项目要求,需要在页面加载完毕之后获取图片的高度,以此来调整图片上面的覆盖层相对于图片顶端的位置. 但在jquery(function(){ /*XXXXXX*/});里面写了之后发现不是很理想,因为当jquery准备就绪的时候,此时图片绝大部分情况下都没加载完毕,这可急坏了本屌丝~~~T~T 本屌丝就想啊,要是jquery有个跟js的onload()的方法多好啊,擦~真是天上掉下个大狗屎,恰巧砸到本屌丝~~在网上搜了下,还真有这么个方法,写法如下:

  • jQuery实现获取隐藏div高度的方法示例

    jQuery实现获取隐藏div高度的方法示例

    本文实例讲述了jQuery实现获取隐藏div高度的方法.分享给大家供大家参考,具体如下: <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>测试获取隐藏div高度</title> <meta name="description" content="jquery获取隐

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

  • JS和jquery获取各种屏幕的宽度和高度的代码

    Javascript: 网页可见区域宽: document.body.clientWidth 网页可见区域高: document.body.clientHeight 网页可见区域宽: document.body.offsetWidth (包括边线的宽) 网页可见区域高: document.body.offsetHeight (包括边线的高) 网页正文全文宽: document.body.scrollWidth 网页正文全文高: document.body.scrollHeight 网页被卷去的高

  • JQuery获取各种宽度、高度(format函数)实例

    复制代码 代码如下: <html xmlns="http://www.w3.org/1999/xhtml"><head>    <title>获取页面宽度</title>    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></

  • JQuery获取当前屏幕的高度宽度的实现代码

    复制代码 代码如下: <script type="text/javascript"> $(document).ready(function() { alert($(window).height()); //浏览器当前窗口可视区域高度 alert($(document).height()); //浏览器当前窗口文档的高度 alert($(document.body).height());//浏览器当前窗口文档body的高度 alert($(document.body).out

  • 基于jQuery实现左右div自适应高度完全相同的代码

    在线演示:http://demo.jb51.net/js/2012/jquery_demo/jquery_div_autoheihet.htm完整代码: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns=&quo

随机推荐