jQuery 获取与设置div的宽高

版权声明：JiahaoZhang原创文章，转载请注明出处 https://blog.csdn.net/GrootBaby/article/details/84394100

jQuery获取与设置div的宽高的方法有两种：

1. 使用尺寸函数
2. 使用css方法

获取宽高

1. 尺寸函数：
    height() 获取高度，width() 获取宽度

2. css获取div宽高：
    css("height")获取高度，css("width")获取宽度

区别：尺寸函数获取的值为整型，而css获取的值为带px的字符串

$(".divClass").click(function() {
    // 使用width() height()方法来获取宽高 返回的是整形数字
    var divWidth = $(this).width();
    var divHeight = $(this).height();
    // 使用css方法获取宽高 返回的是带px的字符串
    var divWidth = $(this).css("width");
    var divHeight = $(this).css("height");
    alert("div宽:" + divWidth + ";div高:" + divHeight);
});

两种方法弹出的值分别为：

div宽:100;div高:100
div宽:100px;div高:100px

设置宽高

第一种方法：使用尺寸函数设置

div.height(100);
div.width(100);

第二种方法：使用css函数设置

div.css({"width":"10px","height":"10px"}); //使用css设置多个属性时，放在大括号中属性间用逗号分隔
div.css("width","10px"); //使用css设置单个属性时，将属性名称与属性值使用逗号分隔（不需要放到大括号中）

第三种方法：使用animate设置

//使用animate与css的方法不同之处在于：animate参数的属性名称不需要用引号包起来
div.animate({width:"100px",height:"100px"}, 1000);

$("#update").click(function() {
    var divWidth = $("#width").val();
    var divHeight = $("#height").val();
    
    // 1. 使用width() height()方法来设置div宽高
    $(".div").width(divWidth).height(divHeight);
    
    // 2. 使用css的方式来设置宽高
    $(".div").css({"width":divWidth+"px", "height":divHeight+"px"});
 
    // 3. 使用函数链的方式写代码
    // 注：使用css设置单个样式时，参数为css("width", divWidth+"px") 逗号分割
    $(".div").css("width", divWidth+"px").css("height", divHeight+"px");
    
    // 4. 使用不同函数的函数链
    $(".div").css("width", divWidth+"px").height(divHeight);
 
    // 5.animate()动画 宽高一块改变
    $(".div").animate({width:divWidth+"px", height:divHeight+"px"}, 4000);
    
    // 6.animate()动画 先改变宽，再改变高
    $(".div").animate({width:divWidth+"px"}, 4000).animate({height:divHeight+"px"}, 4000);
});