jQuery判斷瀏覽器并動態(tài)調(diào)整select寬度的方法
本文實(shí)例講述了jQuery判斷瀏覽器并動態(tài)調(diào)整select寬度的方法。分享給大家供大家參考,具體如下:
<!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>
<title>Untitled Page</title>
<mce:script src="jquery-1.4.4.js" mce_src="jquery-1.4.4.js" type="text/javascript"></mce:script>
<mce:script type="text/javascript"><!--
function userBrowser() {
var browserName = navigator.userAgent.toLowerCase();
if (/msie/i.test(browserName) && !/opera/.test(browserName)) {
browserName="ie";
} else if (/firefox/i.test(browserName)) {
browserName = "firefox";
} else if (/chrome/i.test(browserName) && /webkit/i.test(browserName) && /mozilla/i.test(browserName)) {
browserName = "chrome";
} else if (/opera/i.test(browserName)) {
browserName = "opera";
} else if (/webkit/i.test(browserName) && !(/chrome/i.test(browserName) && /webkit/i.test(browserName) && /mozilla/i.test(browserName))) {
browserName = "safari";
} else {
browserName = "unknow";
}
return browserName;
}
$(function() {
var browser = userBrowser();
if (browser == "ie") {
$("select").each(function() {
$(this).css("width", ($(this).width() + 10) + "px");
});
}
else if (browser == "firefox") {
$("select").each(function() {
$(this).css("width", ($(this).width() + 8) + "px");
});
}
else if (browser == "chrome") {
$("select").each(function() {
$(this).css("width", ($(this).width() + 6) + "px");
});
}
else if (browser == "safari") {
$("select").each(function() {
$(this).css("width", ($(this).width() + 30) + "px");
});
}
});
// --></mce:script>
</head>
<body>
<div>
<!-- 注: select 在doctype下, 會出現(xiàn)width比同width的text短, ie為6px, ff為4px -->
<input id="t1" type="text" style="width: 400px;" /><br />
<select id="s1" style="width: 400px;">
<option>1</option>
</select><br />
<textarea id="TextArea1" cols="20" rows="2" style="width: 400px;">
</div>
</body>
</html>
更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《jQuery拖拽特效與技巧總結(jié)》、《jQuery擴(kuò)展技巧總結(jié)》、《jQuery常見經(jīng)典特效匯總》、《jQuery動畫與特效用法總結(jié)》、《jquery選擇器用法總結(jié)》及《jQuery常用插件及用法總結(jié)》
希望本文所述對大家jQuery程序設(shè)計(jì)有所幫助。
- jquery實(shí)現(xiàn)動態(tài)操作select選中
- jQuery動態(tài)添加刪除select項(xiàng)(實(shí)現(xiàn)代碼)
- jquery動態(tài)加載select下拉框示例代碼
- JQuery動態(tài)添加Select的Option元素實(shí)現(xiàn)方法
- jQuery為動態(tài)生成的select元素添加事件的方法
- jquery select動態(tài)加載選擇(兼容各種瀏覽器)
- jquery Ajax實(shí)現(xiàn)Select動態(tài)添加數(shù)據(jù)
- jquery html動態(tài)生成select標(biāo)簽出問題的解決方法
- jQuery動態(tài)產(chǎn)生select option下拉列表
- jQuery實(shí)現(xiàn)動態(tài)顯示select下拉列表數(shù)據(jù)的方法
相關(guān)文章
jQuery響應(yīng)鼠標(biāo)事件并隱藏與顯示input默認(rèn)值
這篇文章主要介紹了jQuery響應(yīng)鼠標(biāo)事件并隱藏與顯示input默認(rèn)值的具體實(shí)現(xiàn),需要的朋友可以參考下2014-08-08
jQuery實(shí)現(xiàn)每隔幾條元素增加1條線的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)每隔幾條元素增加1條線的方法,可實(shí)現(xiàn)每隔10條li元素增加一條虛線的功能,涉及jQuery元素的匹配與屬性動態(tài)設(shè)置技巧,需要的朋友可以參考下2016-06-06
結(jié)構(gòu)/表現(xiàn)/行為完全分離的選項(xiàng)卡(jquery版和原生JS版)
日常項(xiàng)目中常用到的,用jQuery和原生JS分別寫了一個(gè). 兩種寫法均實(shí)現(xiàn)了結(jié)構(gòu)/表現(xiàn)/行為的完全分離.當(dāng)然,稍作修改,可以在同一個(gè)頁面中應(yīng)用于多個(gè)選項(xiàng)卡.2010-08-08
jQuery實(shí)現(xiàn)web頁面櫻花墜落的特效
這篇文章主要介紹了jQuery實(shí)現(xiàn)web頁面櫻花墜落的特效,效果非常棒,需要的朋友可以參考下2017-06-06
分享20款美化網(wǎng)站的 jQuery Lightbox 燈箱插件
這篇文章主要介紹了分享20款美化網(wǎng)站的 jQuery Lightbox 燈箱插件,需要的朋友可以參考下2014-10-10
jQuery網(wǎng)頁定位導(dǎo)航特效實(shí)現(xiàn)方法
這篇文章主要介紹了jQuery網(wǎng)頁定位導(dǎo)航特效實(shí)現(xiàn)方法,結(jié)合實(shí)例形式分析了jQuery網(wǎng)頁定位導(dǎo)航的功能描述、原理與核心實(shí)現(xiàn)代碼,需要的朋友可以參考下2016-12-12
jquery二級導(dǎo)航內(nèi)容均分的原理及實(shí)現(xiàn)
頭部導(dǎo)航二級導(dǎo)航有些內(nèi)容太長,一列的話太過難看,就要分成兩列,要做到按塊盡量均分,排列順序沒有限制2013-08-08

