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 相关文章推荐
dojo 之基础篇(三)之向服务器发送数据
Mar 24 Javascript
IE autocomplete internet explorer's autocomplete
Jun 30 Javascript
理解Javascript_03_javascript全局观
Oct 11 Javascript
JS、jquery实现几分钟前、几小时前、几天前等时间差显示效果的代码实例分享
Apr 11 Javascript
每天一篇javascript学习小结(基础知识)
Nov 10 Javascript
AngularJs html compiler详解及示例代码
Sep 01 Javascript
微信小程序 PHP生成带参数二维码
Feb 21 Javascript
深入理解vue $refs的基本用法
Jul 13 Javascript
vue小图标favicon不显示的解决方案
Sep 19 Javascript
Vue cli 引入第三方JS和CSS的常用方法分享
Jan 20 Javascript
Node.js readline模块与util模块的使用
Mar 01 Javascript
Ajax请求超时与网络异常处理图文详解
May 23 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 默默经典版本
2009/08/04 PHP
PHP 递归效率分析
2009/11/24 PHP
PHP下escape解码函数的实现方法
2010/08/08 PHP
php技术实现加载字体并保存成图片
2015/07/27 PHP
解密效果
2006/06/23 Javascript
js遍历td tr等html元素
2012/12/13 Javascript
jquery实现图片灯箱明暗的遮罩效果
2013/11/15 Javascript
jQuery学习笔记之总体架构
2014/06/03 Javascript
一波JavaScript日期判断脚本分享
2016/03/06 Javascript
JavaScript实现数组降维详解
2017/01/05 Javascript
js实现返回顶部效果
2017/03/10 Javascript
JS实现可用滑块滑动的缓动图代码
2019/09/01 Javascript
Node.js Domain 模块实例详解
2020/03/18 Javascript
采用python实现简单QQ单用户机器人的方法
2014/07/03 Python
Python获取单个程序CPU使用情况趋势图
2015/03/10 Python
flask-socketio实现WebSocket的方法
2018/07/31 Python
Python的条件表达式和lambda表达式实例
2019/01/31 Python
使用coverage统计python web项目代码覆盖率的方法详解
2019/08/05 Python
pytorch加载语音类自定义数据集的方法教程
2020/11/10 Python
Python数据分析库pandas高级接口dt的使用详解
2020/12/11 Python
html5 利用canvas手写签名并保存的实现方法
2018/07/12 HTML / CSS
详解如何用canvas画一个微笑的表情
2019/03/14 HTML / CSS
HTML5的postMessage的使用手册
2018/12/19 HTML / CSS
彪马英国官网:PUMA英国
2019/02/11 全球购物
牛津在线药房:Oxford Online Pharmacy
2020/11/16 全球购物
完美实现CSS垂直居中的11种方法
2021/03/27 HTML / CSS
应聘美工求职信
2013/11/07 职场文书
个人自我评价分享
2013/12/20 职场文书
房屋转让协议书范本
2014/04/11 职场文书
运动会跳远广播稿5篇
2014/09/17 职场文书
2014年教师业务工作总结
2014/12/19 职场文书
作文评语集锦
2014/12/25 职场文书
给老婆道歉的话
2015/01/20 职场文书
黄河绝恋观后感
2015/06/08 职场文书
详解MySQL数据库千万级数据查询和存储
2021/05/18 MySQL
MySQL分区表管理命令汇总
2022/03/21 MySQL