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以对象为索引的关联数组
Jul 04 Javascript
JQuery EasyUI 加载两次url的原因分析及解决方案
Aug 18 Javascript
jquery中checkbox全选失效的解决方法
Dec 26 Javascript
JS实现点击上移下移LI行数据的方法
Aug 05 Javascript
利用HTML5的画布Canvas实现刮刮卡效果
Sep 06 Javascript
基于javascript如何传递特殊字符
Nov 30 Javascript
详解Js模板引擎(TrimPath)
Nov 22 Javascript
微信小程序实现带刻度尺滑块功能
Mar 29 Javascript
使用react-router4.0实现重定向和404功能的方法
Aug 28 Javascript
浅析vue给不同环境配置不同打包命令
Aug 17 Javascript
vue调用微信JSDK 扫一扫,相册等需要注意的事项
Jan 03 Vue.js
vue使用localStorage持久性存储实现评论列表
Apr 14 Vue.js
基于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
自制短波长线天线频率预选器 - 成功消除B2K之流的镜像
2021/03/02 无线电
PHP4实际应用经验篇(7)
2006/10/09 PHP
dedecms采集中可以过滤多行代码的正则表达式
2007/03/17 PHP
php笔记之:有规律大文件的读取与写入的分析
2013/04/26 PHP
PHP+MySQL存储数据常见中文乱码问题小结
2016/06/13 PHP
PHP基于单例模式编写PDO类的方法
2016/09/13 PHP
php使用curl实现ftp文件下载功能
2017/05/16 PHP
Jquery 实现表格颜色交替变化鼠标移过颜色变化实例
2013/08/28 Javascript
无闪烁更新网页内容JS实现
2013/12/19 Javascript
js post提交调用方法
2014/02/12 Javascript
Jquery仿IGoogle实现可拖动窗口示例代码
2014/08/22 Javascript
javascript实现鼠标放上后下边对应内容变换的效果
2015/08/06 Javascript
JavaScript蒙板(model)功能的简单实现代码
2016/08/04 Javascript
javascript cookie基础应用之记录用户名的方法
2016/09/20 Javascript
Highcharts+NodeJS搭建数据可视化平台示例
2017/01/01 NodeJs
Ionic项目中Native Camera的使用方法
2017/06/07 Javascript
原生JS封装animate运动框架的实例
2017/10/12 Javascript
Vue2 模板template的四种写法总结
2018/02/23 Javascript
VUE2.0+Element-UI+Echarts封装的组件实例
2018/03/02 Javascript
js中DOM事件绑定分析
2018/03/18 Javascript
Bootstrap 时间日历插件bootstrap-datetimepicker配置与应用小结
2019/05/28 Javascript
在Python程序和Flask框架中使用SQLAlchemy的教程
2016/06/06 Python
Django返回json数据用法示例
2016/09/18 Python
Python操作MongoDB数据库的方法示例
2018/01/04 Python
使用Python读取二进制文件的实例讲解
2018/07/09 Python
Visual Studio code 配置Python开发环境
2020/09/11 Python
python模拟点击在ios中实现的实例讲解
2020/11/26 Python
美国女性奢华品牌精品店:INTERMIX
2017/10/12 全球购物
药剂学专业应届生自荐信
2013/09/29 职场文书
电信专业毕业生推荐信
2013/11/18 职场文书
博士研究生自我鉴定范文
2013/12/04 职场文书
中学生自我评价范文
2014/02/08 职场文书
小学母亲节活动方案
2014/03/14 职场文书
2014年客服工作总结范文
2014/11/13 职场文书
太空授课观后感
2015/06/17 职场文书
2015年教导处教学工作总结
2015/07/22 职场文书