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 相关文章推荐
Jquery实现弹出层分享微博插件具备动画效果
Apr 03 Javascript
Extjs407 getValue()和getRawValue()区别介绍
May 21 Javascript
Js判断CSS文件加载完毕的具体实现
Jan 17 Javascript
JavaScript获取XML数据附示例截图
Mar 05 Javascript
js判断上传文件类型判断FileUpload文件类型代码
May 20 Javascript
jQuery图片渐变特效的简单实现
Jun 25 Javascript
使用JavaScript判断手机浏览器是横屏还是竖屏问题
Aug 02 Javascript
js实现下拉框效果(select)
Mar 28 Javascript
js中的闭包学习心得
Feb 06 Javascript
JavaScript继承与多继承实例分析
May 26 Javascript
Vue组件的使用及个人理解与介绍
Feb 09 Javascript
小程序如何构建骨架屏
May 29 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
文章推荐系统(三)
2006/10/09 PHP
ThinkPHP的模版中调用session数据的方法
2014/07/01 PHP
php生成QRcode实例
2014/09/22 PHP
PHP实现HTML生成PDF文件的方法
2014/11/07 PHP
PHP模板引擎Smarty内建函数section,sectionelse用法详解
2016/04/11 PHP
php使用include 和require引入文件的区别
2017/02/16 PHP
php实现的表单验证类完整示例
2019/08/13 PHP
PHP dirname(__FILE__)原理及用法解析
2020/10/28 PHP
JS无法捕获滚动条上的mouse up事件的原因猜想
2012/03/21 Javascript
关于jQuery判断元素是否存在的问题示例探讨
2014/07/21 Javascript
window.location.href的用法(动态输出跳转)
2014/08/09 Javascript
JavaScript实现获得所有兄弟节点的方法
2015/07/23 Javascript
纯javascript实现分页(两种方法)
2015/08/26 Javascript
jQuery简单获取键盘事件的方法
2016/01/22 Javascript
JS简单实现String转Date的方法
2016/03/02 Javascript
前端框架学习总结之Angular、React与Vue的比较详解
2017/03/14 Javascript
详解Vue-cli webpack移动端自动化构建rem问题
2018/04/07 Javascript
JS实现躲避粒子小游戏
2020/06/18 Javascript
python定时执行指定函数的方法
2015/05/27 Python
python爬虫之百度API调用方法
2017/06/11 Python
Python使用Selenium+BeautifulSoup爬取淘宝搜索页
2018/02/24 Python
Python面向对象基础入门之编码细节与注意事项
2018/12/11 Python
python下载微信公众号相关文章
2019/02/26 Python
Django模型序列化返回自然主键值示例代码
2019/06/12 Python
Python底层封装实现方法详解
2020/01/22 Python
python自动脚本的pyautogui入门学习
2020/04/01 Python
OpenCV+python实现膨胀和腐蚀的示例
2020/12/21 Python
tensorflow与numpy的版本兼容性问题的解决
2021/01/08 Python
CSS3绘制超炫的上下起伏波动进度加载动画
2016/04/21 HTML / CSS
js实现移动端H5页面手指滑动刻度尺功能
2017/11/16 HTML / CSS
检测浏览器是否支持html5视频的代码
2013/03/28 HTML / CSS
全球性的在线购物网站:Zapals
2017/03/22 全球购物
如何客观的进行自我评价
2013/12/17 职场文书
2014年小学国庆节活动方案
2014/09/16 职场文书
西安兵马俑导游词
2015/02/02 职场文书
2019年描写人生经典诗句大全
2019/07/08 职场文书