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 相关文章推荐
easyui datagrid 键盘上下控制选中行示例
Mar 31 Javascript
JS比较2个日期间隔的示例代码
Apr 15 Javascript
javaScript实现可缩放的显示区效果代码
Oct 26 Javascript
关于Vue.js 2.0的Vuex 2.0 你需要更新的知识库
Nov 30 Javascript
JS高仿抛物线加入购物车特效实现代码
Feb 20 Javascript
ES6实现的遍历目录函数示例
Apr 07 Javascript
JS实现数组去重方法总结(六种方法)
Jul 14 Javascript
基于es6三点运算符的使用方法(实例讲解)
Oct 12 Javascript
Vue递归组件+Vuex开发树形组件Tree--递归组件的简单实现
Apr 01 Javascript
Vue表单绑定的实例代码(单选按钮,选择框(单选时,多选时,用 v-for 渲染的动态选项)
May 13 Javascript
js代码编写无缝轮播图
Sep 13 Javascript
create-react-app开发常用配置教程
Jun 25 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
全国FM电台频率大全 - 20 广西省
2020/03/11 无线电
PHP学习笔记之二
2011/01/17 PHP
Linux下CoreSeek及PHP扩展模块的安装
2012/09/23 PHP
深入PHP autoload机制的详解
2013/06/09 PHP
日常整理PHP中简单的图形处理(经典)
2015/10/26 PHP
详解WordPress中分类函数wp_list_categories的使用
2016/01/04 PHP
php使用curl获取header检测开启GZip压缩的方法
2018/08/15 PHP
laravel多条件查询方法(and,or嵌套查询)
2019/10/09 PHP
在JavaScript中监听IME键盘输入事件
2011/05/29 Javascript
自己动手开发jQuery插件教程
2011/08/25 Javascript
JS常用函数使用指南
2014/11/23 Javascript
jQuery实现有动画淡出效果的二级折叠菜单代码
2015/10/17 Javascript
JavaScript 冒泡排序和选择排序的实现代码
2016/09/03 Javascript
AngularJS自定义服务与fliter的混合使用
2016/11/24 Javascript
vuejs通过filterBy、orderBy实现搜索筛选、降序排序数据
2020/10/26 Javascript
package.json文件配置详解
2017/06/15 Javascript
分享JS表单验证源码(带错误提示及密码等级)
2020/01/05 Javascript
js实现弹窗效果
2020/08/09 Javascript
vue 使用class创建和清除水印的示例代码
2020/12/25 Vue.js
Vue仿Bibibili首页的问题
2021/01/21 Vue.js
Python的Flask框架中配置多个子域名的方法讲解
2016/06/07 Python
python分治法求二维数组局部峰值方法
2018/04/03 Python
pyinstaller打包单个exe后无法执行错误的解决方法
2019/06/21 Python
python模块常用用法实例详解
2019/10/17 Python
Python列表切片常用操作实例解析
2020/03/10 Python
巴西宠物店在线:Geração Pet
2017/05/31 全球购物
英国领先的酒杯和水晶玻璃器皿制造商:Dartington Crystal
2019/06/23 全球购物
如何使用PHP session
2015/04/21 面试题
GWebs公司笔试题
2012/05/04 面试题
趣味体育活动方案
2014/02/08 职场文书
买房协议书
2014/04/11 职场文书
小学秋季运动会报道稿
2014/09/30 职场文书
工作作风建设心得体会
2014/10/22 职场文书
终止劳动合同证明书样本
2014/11/19 职场文书
小学运动会前导词
2015/07/20 职场文书
2016党性教育学习心得体会
2016/01/21 职场文书