Query常用DIV操作获取和设置长度宽度的实现方法

获取或设置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操作获取和设置长度宽度的实现方法的全部内容了，希望对大家有所帮助，多多支持我们~

赞 (0)

相关推荐

  • jquery获取div宽度的实现思路与代码

    jquery 获取 DIV的width的语句: 复制代码 代码如下: $("#keleyi_com").width(); 其中keleyi_com为DIV的id. 完整示例代码: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&

  • JavaScript获取元素尺寸和大小操作总结

    一.获取元素的行内样式 复制代码 代码如下: var obj = document.getElementById("test"); alert(obj.height + "\n" + obj.width); // 200px 200px typeof=string只是将style属性中的值显示出来 二.获取计算后的样式 复制代码 代码如下: var obj = document.getElementById("test"); var style

  • JQuery获取文本框中字符长度的代码

    趁我写例子这点时间有两个人回答了 呵呵 刚才试验过了 看下例子吧 JS 方法: 复制代码 代码如下: <script type="text/javascript"> // 得到字符串的真实长度(双字节换算为两个单字节) function getStrActualLen(sChars) { //sChars.replace(/[^\x00-\xff]/g,"xx").length/1024+"字节"; //Math.round(sCha

  • Query常用DIV操作获取和设置长度宽度的实现方法

    Query常用DIV操作获取和设置长度宽度的实现方法

    获取或设置div的高度和宽度 方法一:height和width函数(得到的是证书),可以用于获取或设置元素的高度和宽度. val()获取或设置元素的值 方法二:css函数可以用于获取或设置元素的高度和宽度 获取css("width")(得到的是以px结尾的字符串),设置css("width",20px)或css({width:20px,height:20px}) JQuery的链式操作 <!DOCTYPE html PUBLIC "-//W3C//D

  • jQuery获取和设置表单元素的方法

    jQuery提供了val()方法,使用它我们可以快速地获取和设置表单的文本框.单选按钮.以及单选按钮的值.使用val()不带参数,表示获取元素的值使用val()给定参数,则表示把值赋给元素 如下: 复制代码 代码如下: //获取值alert($("input#mytextbox").val());alert($("select#mylist").val());alert($("input#myradio").val()); //设置值$(&quo

  • JavaScript获取和设置CheckBox状态的简单方法

    注意: 针对单个复选框的情况! 复制代码 代码如下: var obj = document.getElementById("tt");var value = obj.checked;alert(value);// 若选中,则返回true,否则返回falseobj.checked = false;// 设置复选框为不选中状态

  • IE及firefox下获取及设置样式值的代码

    复制代码 代码如下: <script type="text/javascript"> //<![CDATA[ function $(obj) { return document.getElementById(obj); } function getStyle(obj,styleName) { if(obj.currentStyle) //for ies { return obj.currentStyle[styleName]; //注意获取方式 } else //fo

  • jQuery常用样式操作实例分析(获取、设置、追加、删除、判断等)

    jQuery常用样式操作实例分析(获取、设置、追加、删除、判断等)

    本文实例分析了jQuery常用样式操作.分享给大家供大家参考,具体如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <style type="text/css"> .high { font-weight: bold; /

  • jQuery实现获取及设置CSS样式操作详解

    jQuery实现获取及设置CSS样式操作详解

    本文实例讲述了jQuery实现获取及设置CSS样式操作.分享给大家供大家参考,具体如下: addClass():向被选元素添加一个或多个类 removeClass():从被选元素删除一个或多个类 toggleClass():对被选元素进行添加/删除类的切换操作 css():设置或返回被选元素的一个或多个样式属性 样式表实例: .important{ font-weight:bold; font-size:xx-large; } .blue{ color:blue; } addClass() <!

  • JS遍历JSON数组及获取JSON数组长度操作示例【测试可用】

    JS遍历JSON数组及获取JSON数组长度操作示例【测试可用】

    本文实例讲述了JS遍历JSON数组及获取JSON数组长度操作.分享给大家供大家参考,具体如下: 遍历 JSON 数组: var questions = data.data.questionnaire.questions; //遍历 json 数组 for (var i in questions) { if (questions[i].type == '(单选)') { alert('danxuan'); } } 获取 JSON 数组长度: function getJsonLength(json)

  • C#通过属性名字符串获取、设置对象属性值操作示例

    本文实例讲述了C#通过属性名字符串获取.设置对象属性值操作.分享给大家供大家参考,具体如下: #通过反射获取对象属性值并设置属性值 0.定义一个类 public class User { public int Id { get; set; } public string Name { get; set; } public string Age { get; set; } } 1.通过属性名(字符串)获取对象属性值 User u = new User(); u.Name = "lily"

  • idea常用习惯操作设置方法图解

    idea常用习惯操作设置方法图解

    1,idea设置软件启动时选择项目进入 依次点击file setting进入到软件的设置界面中去 双击点击 Appearance Behavior,可以打开这个设置项的子内容 在右侧的设置内容中,我们可以看到如图所示的startup和shutdown项中有一个reopen last project on startup被勾选上了,我们需要将其勾选掉,然后点击右下角的apply 和OK使设置生效 2,idea设置编辑活动页签最大个数 3,idea切换工程 file→open Recent选择需要打

  • C#操作DataGridView获取或设置当前单元格的内容

    当前单元格指的是DataGridView焦点所在的单元格,它可以通过DataGridView对象的CurrentCell属性取得.如果当前单元格不存在的时候,返回null. 取得当前单元格的内容: object obj = this.dgv_PropDemo.CurrentCell.Value; 注:返回值是object类型的. 取得当前单元格的列Index: int columnIndex = this.dgv_PropDemo.CurrentCell.ColumnIndex; 取得当前单元格

随机推荐