Query常用DIV操作獲取和設(shè)置長(zhǎng)度寬度的實(shí)現(xiàn)方法
獲取或設(shè)置div的高度和寬度
方法一：height和width函數(shù)（得到的是證書），可以用于獲取或設(shè)置元素的高度和寬度。
val()獲取或設(shè)置元素的值
方法二：css函數(shù)可以用于獲取或設(shè)置元素的高度和寬度
獲取css("width")（得到的是以px結(jié)尾的字符串）,設(shè)置css("width",20px)或css({width:20px,height:20px})
JQuery的鏈?zhǔn)讲僮?/strong>
<!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(){
//獲取結(jié)果沒(méi)有px
$("#ht").val($("#div1").height());
$("#wd").val($("#div1").width());
//獲取結(jié)果后面有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的鏈?zhǔn)讲僮?
//$("#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>
長(zhǎng)度<input type="text" id="ht"/>寬度<input type="text" id="wd"/>
<input type="button" value="獲取" id="get"/>
<input type="button" value="設(shè)置" id="make"/>
<div id="div1"></div>
</body>
</html>
以上就是小編為大家?guī)?lái)的Query常用DIV操作獲取和設(shè)置長(zhǎng)度寬度的實(shí)現(xiàn)方法的全部?jī)?nèi)容了，希望對(duì)大家有所幫助，多多支持腳本之家~
相關(guān)文章
Jquery實(shí)現(xiàn)簡(jiǎn)單的輪播效果(代碼管用)
這篇文章主要介紹了Jquery實(shí)現(xiàn)簡(jiǎn)單的輪播效果(代碼管用) 的相關(guān)資料,需要的朋友可以參考下2016-03-03
jQuery 浮動(dòng)廣告實(shí)現(xiàn)代碼
用jquery實(shí)現(xiàn)的浮動(dòng)廣告代碼,需要的朋友可以參考下。2008-12-12
jquery1.5.1中根據(jù)元素ID獲取元素對(duì)象的代碼
盡管聽(tīng)說(shuō)jquery的大名幾年了，但是一直沒(méi)有使用過(guò)。這兩天想在項(xiàng)目中使用被一些小細(xì)節(jié)折騰的夠嗆，看來(lái)jquery沒(méi)有傳說(shuō)中的那么好學(xué)。2011-04-04
本篇文章主要是對(duì)jQuery選擇器進(jìn)行了全面的總結(jié)介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2014-01-01
JQuery實(shí)現(xiàn)鼠標(biāo)滾輪滑動(dòng)到頁(yè)面節(jié)點(diǎn)
這篇文章主要介紹了使用JQuery實(shí)現(xiàn)鼠標(biāo)滾輪滑動(dòng)到頁(yè)面節(jié)點(diǎn)的代碼,需要的朋友可以參考下2015-07-07
jQuery+jsp下拉框聯(lián)動(dòng)獲取本地?cái)?shù)據(jù)的方法(附源碼)
這篇文章主要介紹了jQuery+jsp下拉框聯(lián)動(dòng)獲取本地?cái)?shù)據(jù)的方法,以實(shí)例形式較為詳細(xì)的分析了jQuery結(jié)合jsp實(shí)現(xiàn)下拉聯(lián)動(dòng)菜單讀取本地?cái)?shù)據(jù)的相關(guān)技巧,并附帶了完整源碼供讀者下載參考,需要的朋友可以參考下2015-12-12
slideToggle+slideup實(shí)現(xiàn)手機(jī)端折疊菜單效果
這篇文章主要為大家詳細(xì)介紹了slideToggle+slideup實(shí)現(xiàn)手機(jī)端折疊菜單效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-05-05
jquery.qtip提示信息插件用法簡(jiǎn)單實(shí)例
這篇文章主要介紹了jquery.qtip提示信息插件用法,結(jié)合簡(jiǎn)單實(shí)例形式分析了該插件用于顯示提示信息的相關(guān)使用技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2016-06-06
關(guān)于echarts在節(jié)點(diǎn)顯示動(dòng)態(tài)數(shù)據(jù)及添加提示文本所遇到的問(wèn)題
這篇文章主要介紹了關(guān)于echarts在節(jié)點(diǎn)顯示動(dòng)態(tài)數(shù)據(jù)及添加提示文本所遇到的問(wèn)題,需要的朋友可以參考下2018-04-04
解決jquery無(wú)法找到其他父級(jí)子集問(wèn)題的方法
這篇文章主要為大家詳細(xì)介紹了解決jquery無(wú)法找到其他父級(jí)子集問(wèn)題的方法，感興趣的小伙伴們可以參考一下2016-05-05