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


Posted in Javascript onSeptember 19, 2016

获取或设置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操作获取和设置长度宽度的实现方法

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

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

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

Javascript 相关文章推荐
一个对于js this关键字的问题
Jan 09 Javascript
JQuery获取表格数据示例代码
May 26 Javascript
node.js中的querystring.unescape方法使用说明
Dec 10 Javascript
JavaScript判断浏览器对CSS3属性是否支持的多种方法
Nov 13 Javascript
jQuery自定义插件详解及实例代码
Dec 29 Javascript
jQuery判断邮箱格式对错实例代码讲解
Apr 12 jQuery
详解VUE 数组更新
Dec 16 Javascript
js监听html页面的上下滚动事件方法
Sep 11 Javascript
js中怎么判断两个字符串相等的实例
Jan 17 Javascript
vue 中Virtual Dom被创建的方法
Apr 15 Javascript
vue实现全匹配搜索列表内容
Sep 26 Javascript
Vue中 axios delete请求参数操作
Aug 25 Javascript
基于jQuery实现中英文切换导航条效果
Sep 18 #Javascript
jQuery EasyUI常用数据验证汇总
Sep 18 #Javascript
jQuery EasyUI封装简化操作
Sep 18 #Javascript
基于jQuery ligerUI实现分页样式
Sep 18 #Javascript
深入浅析JS是按值传递还是按引用传递(推荐)
Sep 18 #Javascript
JQuery控制DIV的选取实现方法
Sep 18 #Javascript
chrome下判断点击input上标签还是其余标签的实现方法
Sep 18 #Javascript
You might like
PHP正则表达式之定界符和原子介绍
2012/10/05 PHP
thinkphp5.0自定义验证规则使用方法
2017/11/16 PHP
可以用来调试JavaScript错误的解决方案
2010/08/07 Javascript
jQuery之浮动窗口实现代码(两种方法)
2010/09/08 Javascript
JQuery EasyUI 对话框的使用方法
2010/10/24 Javascript
js getBoundingClientRect() 来获取页面元素的位置
2010/11/25 Javascript
js点击出现悬浮窗效果不使用JQuery插件
2014/01/20 Javascript
浅谈页面装载js及性能分析方法
2014/12/09 Javascript
node.js中的buffer.Buffer.byteLength方法使用说明
2014/12/10 Javascript
jQuery实现折线图的方法
2015/02/28 Javascript
使用nodejs中httpProxy代理时候出现404异常的解决方法
2016/08/15 NodeJs
jQuery的deferred对象使用详解
2016/09/25 Javascript
微信小程序 for 循环详解
2016/10/09 Javascript
JavaScript实现同一个页面打开多张图片
2016/12/29 Javascript
js将字符串中的每一个单词的首字母变为大写其余均为小写
2017/01/05 Javascript
详解vue 组件之间使用eventbus传值
2017/10/25 Javascript
JavaScript模拟实现自由落体效果
2018/08/28 Javascript
[08:44]和酒神一起战斗 DOTA2教你做大人
2014/03/27 DOTA
[02:28]DOTA2亚洲邀请赛附加赛 RECAP赛事回顾
2015/01/29 DOTA
[01:02:20]Mineski vs TNC 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
[02:50]【扭转乾坤,只此一招】DOTA2全新版本永雾林渊开启新篇章
2020/12/24 DOTA
用python写扫雷游戏实例代码分享
2018/05/27 Python
完美解决python中ndarray 默认用科学计数法显示的问题
2018/07/14 Python
python树莓派红外反射传感器
2019/01/21 Python
基于Python实现扑克牌面试题
2019/12/11 Python
美国最大的高尔夫发球时间预订网站:TeeOff.com
2018/03/28 全球购物
几个常见的软件测试问题
2016/09/07 面试题
生产经理的自我评价分享
2013/11/07 职场文书
教育学专业实习生的自我鉴定
2013/11/26 职场文书
自荐书封面下载
2013/11/29 职场文书
建筑管理专业求职信
2014/07/28 职场文书
校园新闻广播稿5篇
2014/10/10 职场文书
挂职个人工作总结
2015/03/05 职场文书
幼儿园托班开学寄语(2015秋季)
2015/05/27 职场文书
住房公积金贷款工资证明
2015/06/12 职场文书
2015年高中生国庆节演讲稿
2015/07/30 职场文书