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 css样式操作代码(批量操作)
Oct 09 Javascript
跟着JQuery API学Jquery 之三 筛选
Apr 09 Javascript
JS中Iframe之间传值及子页面与父页面应用
Mar 11 Javascript
javaScript(JS)替换节点实现思路介绍
Apr 17 Javascript
JS中类或对象的定义说明
Mar 10 Javascript
JS实现图文并茂的tab选项卡效果示例【附demo源码下载】
Sep 21 Javascript
jQuery实现手势解锁密码特效
Aug 14 jQuery
深入理解Vue 的条件渲染和列表渲染
Sep 01 Javascript
vue的全局提示框组件实例代码
Feb 26 Javascript
玩转Koa之koa-router原理解析
Dec 29 Javascript
vue App.vue中的公共组件改变值触发其他组件或.vue页面监听
May 31 Javascript
JavaScript设计模式---单例模式详解【四种基本形式】
May 16 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中在PDO中使用事务(Transaction)
2011/05/14 PHP
PHP Try-catch 语句使用技巧
2016/02/28 PHP
PHP5.2中PDO的简单使用方法
2016/03/25 PHP
PHP中如何防止外部恶意提交调用ajax接口
2016/04/11 PHP
微信 getAccessToken方法详解及实例
2016/11/23 PHP
javascript针对DOM的应用分析(四)
2012/04/15 Javascript
js、css、img等浏览器缓存问题的2种解决方案
2013/10/23 Javascript
使用javascript实现ListBox左右全选,单选,多选,全请
2013/11/07 Javascript
Javascript中匿名函数的多种调用方式总结
2013/12/06 Javascript
js获取页面及个元素高度、宽度的代码
2016/04/26 Javascript
下一代Bootstrap的5个特点 超酷炫!
2016/06/17 Javascript
Angularjs结合Bootstrap制作的一个TODO List
2016/08/18 Javascript
AngularJS路由切换实现方法分析
2017/03/17 Javascript
ES6新特性二:Iterator(遍历器)和for-of循环详解
2017/04/20 Javascript
详解通过JSON数据使用VUE.JS
2017/05/26 Javascript
JS设计模式之访问者模式定义与用法分析
2018/02/05 Javascript
详解在Vue中使用TypeScript的一些思考(实践)
2018/07/06 Javascript
Node批量爬取头条视频并保存方法
2018/09/20 Javascript
在微信小程序中渲染HTML内容的方法示例
2018/09/28 Javascript
angularjs使用div模拟textarea文本框的方法
2018/10/02 Javascript
鸿蒙系统中的 JS 开发框架
2020/09/18 Javascript
[02:47]DOTA2英雄基础教程 野性怒吼兽王
2013/12/05 DOTA
跟老齐学Python之再深点,更懂list
2014/09/20 Python
详解安装mitmproxy以及遇到的坑和简单用法
2019/01/21 Python
python3实现绘制二维点图
2019/12/04 Python
pytorch实现mnist分类的示例讲解
2020/01/10 Python
Python实现序列化及csv文件读取
2020/01/19 Python
python中zip()函数遍历多个列表方法
2021/02/18 Python
挪威户外活动服装和装备购物网站:Bergfreunde挪威
2016/10/20 全球购物
美国在线奢侈品寄售商店:Luxury Garage Sale
2018/08/19 全球购物
应届生的求职推荐信范文
2013/11/30 职场文书
汽车维修专业个人求职信范文
2014/01/01 职场文书
公司门卫岗位职责范本
2014/07/08 职场文书
平遥古城导游词
2015/02/03 职场文书
保险公司增员口号
2015/12/25 职场文书
节约用水广告语60条
2019/11/14 职场文书