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($("#div").width());1").height()); 
    $("#wd").val($("#div").css("height"));1").width()); 
    //取得結果の後ろにpxがあります 
    //$("#ht").val($("#div").width());1").css("height")); 
    //$("#wd").val($("#div").css("height"));1").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:赤; 
  border:ブラック; 1px 固定; 
} 
</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操作の長さと幅の取得および設定方法の全てが終わりました。皆さんの助けになれば幸いです。ナイアラベンチャータイプを多く応援してください~

基礎教程