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 相关文章推荐
用javascript父窗口控制只弹出一个子窗口
Apr 10 Javascript
点图片上一页下一页翻页效果
Jul 09 Javascript
JavaScript学习笔记(十)
Jan 17 Javascript
jQuery语法总结和注意事项小结
Nov 11 Javascript
jquery的each方法使用示例分享
Mar 25 Javascript
javascript 动态修改css样式方法汇总(四种方法)
Aug 27 Javascript
学习JavaScript设计模式之装饰者模式
Jan 19 Javascript
Javascript typeof与instanceof的区别
Oct 18 Javascript
JS button按钮实现submit按钮提交效果
Nov 01 Javascript
深入理解vue.js双向绑定的实现原理
Dec 05 Javascript
纯JS实现轮播图
Feb 22 Javascript
jQuery插件zTree实现获取一级节点数据的方法
Mar 08 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
4月1日重磅发布!《星际争霸II》6.0.0版本更新
2020/04/09 星际争霸
PHP简介
2006/10/09 PHP
php判断输入是否是纯数字,英文,汉字的方法
2015/03/05 PHP
PHP基于文件存储实现缓存的方法
2015/07/20 PHP
PHP文件上传类实例详解
2016/04/08 PHP
jquery 表单下所有元素的隐藏
2009/07/25 Javascript
JS 用6N±1法求素数 实例教程
2009/10/20 Javascript
文本有关的样式和jQuery求对象的高宽问题分别说明
2013/08/30 Javascript
jquery 页眉单行信息滚动显示实现思路及代码
2014/06/26 Javascript
Node.js开发之访问Redis数据库教程
2015/01/14 Javascript
js实现的二分查找算法实例
2016/01/21 Javascript
基于JavaScript实现 网页切出 网站title变化代码
2016/04/03 Javascript
javascript实现下雪效果【实例代码】
2016/05/03 Javascript
ReactJs快速入门教程(精华版)
2016/11/28 Javascript
Bootstrap CSS布局之图像
2016/12/17 Javascript
vue2.0移动端滑动事件vue-touch的实例代码
2018/11/27 Javascript
vue cli安装使用less的教程详解
2019/07/12 Javascript
原生JavaScript实现弹幕组件的示例代码
2020/10/12 Javascript
Python绘制3D图形
2018/05/03 Python
python生成密码字典的方法
2018/07/06 Python
基于Python实现天天酷跑功能
2021/01/06 Python
Pycharm创建python文件自动添加日期作者等信息(步骤详解)
2021/02/03 Python
DHC美国官网:日本通信销售第一的化妆品品牌
2017/11/12 全球购物
Lampenwelt德国:欧洲领先的灯具和照明在线商店
2018/08/05 全球购物
洛杉矶时尚女装系列:J.ING US
2019/03/17 全球购物
大学总结自我鉴定
2014/01/18 职场文书
个人自我评价和职业目标
2014/01/24 职场文书
党员干部承诺书范文
2014/03/25 职场文书
企业公益活动策划方案
2014/08/24 职场文书
中秋节国旗下演讲稿
2014/09/05 职场文书
2015年大学班主任工作总结
2015/04/30 职场文书
毕业答辩开场白范文
2015/05/27 职场文书
画展观后感
2015/06/17 职场文书
python之PySide2安装使用及QT Designer UI设计案例教程
2021/07/26 Python
Python 装饰器(decorator)常用的创建方式及解析
2022/04/24 Python
python如何将mat文件转为png
2022/07/15 Python