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 相关文章推荐
iframe的onload在Chrome/Opera中执行两次Bug的解决方法
Mar 17 Javascript
jquery制作搜狐快站页面效果示例分享
Feb 21 Javascript
JavaScript利用构造函数和原型的方式模拟C#类的功能
Mar 06 Javascript
javascript使用window.open提示“已经计划系统关机”的原因
Aug 15 Javascript
javascript返回顶部的按钮实现方法
Jan 09 Javascript
Google 地图获取API Key详细教程
Aug 06 Javascript
Vue.js快速入门教程
Sep 07 Javascript
基于jQuery实现顶部导航栏功能
Dec 27 Javascript
详解JavaScript 中 if / if...else...替换方式
Jul 15 Javascript
vue 搭建后台系统模块化开发详解
May 01 Javascript
Element-ui DatePicker显示周数的方法示例
Jul 19 Javascript
Vue CLI项目 axios模块前后端交互的使用(类似ajax提交)
Sep 01 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的无限分类实现想法~
2007/01/02 PHP
php 特殊字符处理函数
2008/09/05 PHP
php实现爬取和分析知乎用户数据
2016/01/26 PHP
PHP实现长文章分页实例代码(附源码)
2016/02/03 PHP
yii2实现根据时间搜索的方法
2016/05/25 PHP
详解PHP发送邮件知识点
2018/05/06 PHP
慎用 somefunction.prototype 分析
2009/06/02 Javascript
复制小说文本时出现的随机乱码的去除方法
2010/09/07 Javascript
js判断元素是否隐藏的方法
2014/06/09 Javascript
JavaScript通过元素的ID和name设置样式
2014/07/08 Javascript
详解JavaScript异步编程中jQuery的promise对象的作用
2016/05/03 Javascript
JavaScript仿百度图片浏览效果
2016/11/23 Javascript
BootStrap轮播HTML代码(推荐)
2016/12/10 Javascript
Vue中添加过渡效果的方法
2017/03/16 Javascript
浅谈ECMAScript6新特性之let、const
2017/08/02 Javascript
koa router 多文件引入的方法示例
2019/05/22 Javascript
从Node.js事件触发器到Vue自定义事件的深入讲解
2020/06/26 Javascript
python 设置输出图像的像素大小方法
2019/07/04 Python
python 对任意数据和曲线进行拟合并求出函数表达式的三种解决方案
2020/02/18 Python
Python通过Pillow实现图片对比
2020/04/29 Python
python实现数据结构中双向循环链表操作的示例
2020/10/09 Python
草莓网英国官网:Strawberrynet UK
2017/02/12 全球购物
Move Free官方海外旗舰店:美国骨关节健康专业品牌
2017/12/06 全球购物
美国珠宝店:Helzberg Diamonds
2018/10/24 全球购物
Edwaybuy西班牙:小米在线商店
2019/12/04 全球购物
Penhaligon’s英国官网:成立于1870年的英国香水制造商
2021/02/18 全球购物
简述DNS进行域名解析的过程
2013/12/02 面试题
工程力学专业毕业生求职信
2013/10/06 职场文书
大学校园活动策划书
2014/02/04 职场文书
美术指导助理求职信
2014/04/20 职场文书
幼儿园六一儿童节活动总结
2015/02/10 职场文书
2016年社区“6.26”禁毒日宣传活动总结
2016/04/05 职场文书
高中16字霸气押韵班级口号集锦!
2019/06/27 职场文书
Redis的字符串是如何实现的
2021/10/24 Redis
win11怎么用快捷键锁屏? windows11锁屏的几种方法
2021/11/21 数码科技
Win11怎么把合并的任务栏分开 Win11任务栏合并分开教程
2022/04/06 数码科技