脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → jquery → jquery 获取div宽度

Query常用DIV操作获取和设置长度宽度的实现方法

 更新时间：2016年09月19日 08:05:58   投稿：jingxian  
下面小编就为大家带来一篇Query常用DIV操作获取和设置长度宽度的实现方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧

获取或设置div的高度和宽度

方法一：height和width函数（得到的是证书），可以用于获取或设置元素的高度和宽度。

val()获取或设置元素的值

方法二：css函数可以用于获取或设置元素的高度和宽度

获取css("width")（得到的是以px结尾的字符串）,设置css("width",20px)或css({width:20px,height:20px})

JQuery的链式操作

<!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> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<script type="text/javascript" src="jQuery/jquery-1.12.1.js"></script> 
<script type="text/javascript"> 
$(function(){ 
  $("#get").click(function(){ 
    //获取结果没有px 
    $("#ht").val($("#div1").height()); 
    $("#wd").val($("#div1").width()); 
 
    //获取结果后面有px 
    //$("#ht").val($("#div1").css("height")); 
    //$("#wd").val($("#div1").css("width")); 
  }); 
  $("#make").click(function(){ 
    //$("#div1").css({height:$("#ht").val(),width:$("#wd").val()}); 
     
    //$("#div1").css("height",$("#ht").val()); 
    //$("#div1").css("width",$("#wd").val()); 
     
    $("#div1").height($("#ht").val()); 
    $("#div1").width($("#wd").val()); 
    // JQuery的链式操作 
    //$("#div1").css("height",$("#ht").val()).width($("#wd").val()); 
     
  }); 
}); 
</script> 
<style type="text/css"> 
#div1 
{ 
  width:150px; 
  height:150px; 
  background-color:red; 
  border:black 1px solid; 
} 
</style> 
</head> 
 
<body> 
长度<input type="text" id="ht"/>宽度<input type="text" id="wd"/> 
<input type="button" value="获取" id="get"/> 
<input type="button" value="设置" id="make"/> 
<div id="div1"></div> 
</body> 
</html>

以上就是小编为大家带来的Query常用DIV操作获取和设置长度宽度的实现方法的全部内容了，希望对大家有所帮助，多多支持脚本之家~

您可能感兴趣的文章:

相关文章

  • jQuery Dialog对话框事件用法实例分析

    jQuery Dialog对话框事件用法实例分析

    这篇文章主要介绍了jQuery Dialog对话框事件用法,结合实例形式分析了Dialog对话框实现的静态提示类对话框、动态提示类对话框以及遮罩类对话框的概念、使用方法与相关注意事项,需要的朋友可以参考下
    2016-05-05
  • jQuery 回调函数（callback）的使用和基础

    jQuery 回调函数（callback）的使用和基础

    这篇文章主要介绍了jQuery 回调函数（callback）的使用和基础,需要的朋友可以参考下
    2015-02-02
  • jQuery实战之仿淘宝商城左侧导航效果

    jQuery实战之仿淘宝商城左侧导航效果

    网络上很很多这种效果的JS写法，但是还没有看见用jQuery写的，效果实现很简单，确切的说是用jquery实现这个效果很简单，这就是jquery的强大和魅力所在。
    2011-04-04
  • jQuery排序插件tableSorter使用方法

    jQuery排序插件tableSorter使用方法

    这篇文章主要为大家详细介绍了jQuery排序插件tableSorter的使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-02-02
  • jquery解析xml字符串示例分享

    jquery解析xml字符串示例分享

    用JavaScript解析XML数据是常见的编程任务，JavaScript能做的，JQuery当然也能做。下面我们来总结几个使用JQuery解析XML的例子
    2014-03-03
  • jQuery EasyUI 入门必看

    jQuery EasyUI 入门必看

    下面小编就为大家带来一篇jQuery EasyUI 入门必看。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-06-06
  • jquery实现弹出层遮罩效果的简单实例

    jquery实现弹出层遮罩效果的简单实例

    这篇文章主要介绍了jquery实现弹出层遮罩效果的简单实例。需要的朋友可以过来参考下，希望对大家有所帮助
    2014-03-03
  • jQuery旋转插件—rotate支持(ie/Firefox/SafariOpera/Chrome)

    jQuery旋转插件—rotate支持(ie/Firefox/SafariOpera/Chrome)

    网上发现一个很有意思的jQuery旋转插件，支持Internet Explorer 6.0+ 、Firefox 2.0 、Safari 3 、Opera 9 、Google Chrome，高级浏览器下使用Transform，低版本ie使用VML实现,感兴趣的朋友可以了解下
    2013-01-01
  • jQuery团购倒计时特效实现方法

    jQuery团购倒计时特效实现方法

    这篇文章主要介绍了jQuery团购倒计时特效实现方法,可实现相对固定时间的倒计时效果,非常具有实用价值,需要的朋友可以参考下
    2015-05-05
  • jQuery中的replace字符串替换实现不同尺寸图片切换功能

    jQuery中的replace字符串替换实现不同尺寸图片切换功能

    这篇文章主要介绍了jQuery之replace字符串替换实现不同尺寸图片切换,使用jQuery的replace()方法可以很方便地实现不同尺寸图片的切换，需要的朋友可以参考下
    2023-06-06

最新评论