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 相关文章推荐
asp.net 30分钟掌握无刷新 Repeater
Sep 16 Javascript
简单的邮箱登陆的提示效果类似于yahoo邮箱
Feb 26 Javascript
javascript闭包入门示例
Apr 30 Javascript
node.js实现多图片上传实例
Jun 03 Javascript
JavaScript函数详解
Nov 17 Javascript
分享12个实用的jQuery代码片段
Mar 09 Javascript
js学习笔记之事件处理模型
Oct 31 Javascript
玩转NODE.JS(四)-搭建简单的聊天室的代码
Nov 11 Javascript
EasyUI实现下拉框多选功能
Nov 07 Javascript
javascript实现获取一个日期段内每天不同的价格(计算入住总价格)
Feb 05 Javascript
vue动态设置img的src路径实例
Sep 18 Javascript
vue 返回上一页,页面样式错乱的解决
Nov 14 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+jquery编码方面的一些心得(utf-8 gb2312)
2010/10/12 PHP
php无限极分类实现的两种解决方法
2013/04/28 PHP
几个比较经典常用的jQuery小技巧
2010/03/01 Javascript
JQuery 学习技巧总结
2010/05/21 Javascript
JQuery实现展开关闭层的方法
2015/02/17 Javascript
深入分析下javascript中的[]()+!
2015/07/07 Javascript
jQuery添加删除DOM元素方法详解
2016/01/18 Javascript
javascript cookie的简单应用
2016/02/24 Javascript
Javascript数组循环遍历之forEach详解
2016/11/07 Javascript
浅析jsopn跨域请求原理及cors(跨域资源共享)的完美解决方法
2017/02/06 Javascript
vue2.0父子组件间通信的实现方法
2017/04/19 Javascript
vue学习之mintui picker选择器实现省市二级联动示例
2017/10/12 Javascript
详解基于vue-cli优化的webpack配置
2017/11/06 Javascript
在vue中通过axios异步使用echarts的方法
2018/01/13 Javascript
vue-cli项目无法用本机IP访问的解决方法
2018/09/20 Javascript
利用Electron简单撸一个Markdown编辑器的方法
2019/06/10 Javascript
13 个npm 快速开发技巧(推荐)
2019/07/04 Javascript
uniapp实现可以左右滑动导航栏
2020/10/21 Javascript
python实现进程间通信简单实例
2014/07/23 Python
安装ElasticSearch搜索工具并配置Python驱动的方法
2015/12/22 Python
使用C#配合ArcGIS Engine进行地理信息系统开发
2016/02/19 Python
python实现人人自动回复、抢沙发功能
2018/06/08 Python
Python爬虫之正则表达式的使用教程详解
2018/10/25 Python
windows下Python安装、使用教程和Notepad++的使用教程
2019/10/06 Python
利用Python中的Xpath实现一个在线汇率转换器
2020/09/09 Python
微软英国官方网站:Microsoft英国
2016/10/15 全球购物
施华洛世奇德国官网:SWAROVSKI德国
2017/02/01 全球购物
Blank NYC官网:夹克、牛仔裤等
2020/12/16 全球购物
internal修饰符起什么作用
2013/12/16 面试题
中专生自我鉴定范文
2013/12/19 职场文书
校园安全广播稿
2014/02/08 职场文书
2014年团支部工作总结
2014/11/17 职场文书
个人租房协议书
2014/11/28 职场文书
2014年后勤管理工作总结
2014/12/01 职场文书
小学国庆节活动总结
2015/03/23 职场文书
幼儿园保教工作总结2015
2015/10/15 职场文书