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 匿名函数及其代码模式原理
Mar 19 Javascript
javascript Array对象基础知识小结
Nov 16 Javascript
使用js正则控制input标签只允许输入的值
Jul 29 Javascript
javascript中的window.location.search方法简介
Sep 02 Javascript
js 操作符汇总
Nov 08 Javascript
js读取csv文件并使用json显示出来
Jan 09 Javascript
js调用百度地图及调用百度地图的搜索功能
Sep 07 Javascript
酷炫jQuery全屏3D焦点图动画效果
Mar 22 Javascript
一款简单的jQuery图片标注效果附源码下载
Mar 22 Javascript
JavaScript实现打开链接页面的方式汇总
Jun 02 Javascript
使用vue完成微信公众号网页小记(推荐)
Apr 28 Javascript
layui table 表格模板按钮的实例代码
Sep 21 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实现的进度条效果详解
2016/05/03 PHP
PHP优化之批量操作MySQL实例分析
2020/04/23 PHP
javascript 文章截取部分无损html显示实现代码
2010/05/04 Javascript
推荐40个非常优秀的jQuery插件和教程【系列三】
2011/11/09 Javascript
jQuery学习笔记 操作jQuery对象 文档处理
2012/09/19 Javascript
js实现获取焦点后光标在字符串后
2014/09/17 Javascript
jquery动态导航插件dynamicNav用法实例分析
2015/09/06 Javascript
javascript多物体运动实现方法分析
2016/01/08 Javascript
详解js中的apply与call的用法
2016/07/30 Javascript
Angular.js实现注册系统的实例详解
2016/12/18 Javascript
使用JS 插件qrcode.js生成二维码功能
2017/02/20 Javascript
socket.io与pm2(cluster)集群搭配的解决方案
2017/06/02 Javascript
Vue.js框架路由使用方法实例详解
2017/08/25 Javascript
用node-webkit把web应用打包成桌面应用(windows环境)
2018/02/01 Javascript
微信小程序动态生成二维码的实现代码
2018/07/25 Javascript
利用vue.js把静态json绑定bootstrap的table方法
2018/08/28 Javascript
webpack4打包vue前端多页面项目
2018/09/17 Javascript
p5.js实现动态图形临摹
2019/10/23 Javascript
[00:31]DOTA2上海特级锦标赛 Fnatic战队宣传片
2016/03/04 DOTA
[59:26]DOTA2上海特级锦标赛D组资格赛#1 EG VS VP第二局
2016/02/28 DOTA
python返回昨天日期的方法
2015/05/13 Python
python结合opencv实现人脸检测与跟踪
2015/06/08 Python
python django 实现验证码的功能实例代码
2017/05/18 Python
简单了解Django应用app及分布式路由
2019/07/24 Python
Django中提供的6种缓存方式详解
2019/08/05 Python
python实现微信打飞机游戏
2020/03/24 Python
pycharm中如何自定义设置通过“ctrl+滚轮”进行放大和缩小实现方法
2020/09/16 Python
提高python代码运行效率的一些建议
2020/09/29 Python
财务会计毕业生个人求职信
2014/02/03 职场文书
趣味运动会活动方案
2014/02/12 职场文书
交通事故协议书范文
2014/04/16 职场文书
小学庆六一活动总结
2014/08/28 职场文书
2014年售票员工作总结
2014/11/19 职场文书
小学优秀班主任材料
2014/12/17 职场文书
舞蹈社团活动总结
2015/05/07 职场文书
解决Laravel使用验证时跳转到首页的问题
2021/11/17 PHP