jQuery中innerWidth()方法用法實(shí)例
更新時(shí)間：2015年01月19日 09:01:43 投稿：shichen2014
這篇文章主要介紹了jQuery中innerWidth()方法用法,實(shí)例分析了innerWidth()方法的功能、定義及獲取第一個(gè)匹配元素內(nèi)部區(qū)域?qū)挾鹊氖褂眉记?需要的朋友可以參考下
本文實(shí)例講述了jQuery中innerWidth()方法用法。分享給大家供大家參考。具體分析如下：
獲取第一個(gè)匹配元素內(nèi)部區(qū)域?qū)挾取?br />
包括內(nèi)補(bǔ)白(padding)、不包括邊框border)。也就是說內(nèi)部區(qū)域的寬度等于padding和border之和。
此方法對(duì)可見和隱藏元素均有效。
可以結(jié)合innerHeight()方法學(xué)習(xí)。
語法結(jié)構(gòu):
復(fù)制代碼 代碼如下:
$(selector).innerWidth()
實(shí)例代碼:
復(fù)制代碼 代碼如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.fzitv.net/" />
<title>腳本之家</title>
<style type="text/css">
p{
background-color:green;
height:100px;
width:200px;
padding:10px;
border:5px solid red;
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").text($("p").innerWidth())
});
});
</script>
</head>
<body>
<p>此處顯示innerWidth數(shù)值</p>
<button>點(diǎn)擊查看p的innerWidth</button>
</body>
</html>
以上代碼可以將p元素的內(nèi)部區(qū)域?qū)挾葘懭朐乇旧韮?nèi)部。
希望本文所述對(duì)大家的jQuery程序設(shè)計(jì)有所幫助。
相關(guān)文章
默認(rèn)設(shè)置下，所有請(qǐng)求均為異步請(qǐng)求。如果需要發(fā)送同步請(qǐng)求，請(qǐng)將此選項(xiàng)設(shè)置為 false。注意，同步請(qǐng)求將鎖住瀏覽器，用戶其它操作必須等待請(qǐng)求完成才可以執(zhí)行2011-10-10
jQuery EasyUI API 中文文檔 - Tree樹使用介紹
jQuery EasyUI API 中文文檔 - Tree樹使用介紹，需要的朋友可以參考下。2011-11-11
HTML5+jQuery實(shí)現(xiàn)搜索智能匹配功能
本文主要介紹了HTML5+jquery實(shí)現(xiàn)的搜索匹配效果的實(shí)例代碼。具有很好的參考價(jià)值。下面跟著小編一起來看下吧2017-03-03
jquery.fastLiveFilter.js實(shí)現(xiàn)輸入自動(dòng)過濾的方法
這篇文章主要介紹了jquery.fastLiveFilter.js實(shí)現(xiàn)輸入自動(dòng)過濾的方法,涉及jquery鼠標(biāo)事件及字符串遍歷的相關(guān)技巧,簡(jiǎn)單實(shí)用,需要的朋友可以參考下2015-08-08
jQuery插件Timelinr 實(shí)現(xiàn)時(shí)間軸特效
時(shí)間軸是依據(jù)時(shí)間順序，把一方面或多方面的事件串聯(lián)起來，形成相對(duì)完整的記錄體系，再運(yùn)用圖文的形式呈現(xiàn)給用戶，本文給大家收集了互聯(lián)網(wǎng)上的效果比較不錯(cuò)的一款，分享給大家2015-10-10
javascript向后臺(tái)傳送相同屬性的參數(shù)即數(shù)組參數(shù)
在傳送參數(shù)時(shí)，經(jīng)常會(huì)碰到向后臺(tái)傳送一些相同屬性的參數(shù)，最好的選擇是采用數(shù)組的方式，下面有個(gè)不錯(cuò)的示例，大家可以參考下2014-02-02
jQuery使用eraser.js插件實(shí)現(xiàn)擦除、刮刮卡效果的方法【附eraser.js下載】
這篇文章主要介紹了jQuery使用eraser.js插件實(shí)現(xiàn)擦除、刮刮卡效果的方法,結(jié)合實(shí)例形式分析了jQuery.eraser.js插件的功能、使用方法與相關(guān)注意事項(xiàng),并附帶eraser.js插件源碼供讀者下載使用,需要的朋友可以參考下2017-04-04
jQuery實(shí)現(xiàn)簡(jiǎn)單下拉導(dǎo)航效果
這篇文章主要介紹了jQuery實(shí)現(xiàn)簡(jiǎn)單下拉導(dǎo)航效果,通過簡(jiǎn)單的元素遍歷與樣式替換實(shí)現(xiàn)下拉導(dǎo)航的功能,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-09-09
JQuery擴(kuò)展插件Validate 2通過參數(shù)設(shè)置驗(yàn)證規(guī)則
在前面示例中使用的的方法簡(jiǎn)單方便，但沒有完全將js與頁面結(jié)構(gòu)完全分離，也就是說js依賴了class,下面通過validate()方法的參數(shù)設(shè)置驗(yàn)證規(guī)則將js與頁面結(jié)構(gòu)完全分離2011-09-09
Jquery ui datepicker設(shè)置日期范圍，如只能隔3天【實(shí)現(xiàn)代碼】
下面小編就為大家?guī)硪黄狫query ui datepicker 設(shè)置日期范圍，如只能隔3天【實(shí)現(xiàn)代碼】。小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考2016-05-05