Quantcast
Channel: 黑暗執行緒
Viewing all articles
Browse latest Browse all 2311

【茶包射手日記】jQuery.css()傳入數字或字串值的差異

$
0
0

KendoUI由2013.2.716升級到2013.3.1119後,出現kendoWindow指定位置無效的狀況。問題程式碼為$("#w").kendoWindow({ position: { top: 6, left: 6 } }),跟官方文件範例相同,原本運作良好,元件升級後失效。推測與元件版本有關,先使用JS偵錯工具找出kendoWindow的position相關邏輯,再比較新舊版kendo.web.js,發現以下差異:

KendoUI 2013.3.1119新加入的position.left = position.left.toString()的寫法看來很可疑,傳入的數字在新版時會先被轉成字串,才當成jQuery .css()的參數值,莫非.css("top", …) 傳入數字或字串的結果? 做個實驗吧!

<!DOCTYPEhtml>
<html>
<head>
<metacharset=utf-8/>
<title>CSS value type test</title>
</head>
<body>
<divid='x'style='position: absolute'></div>
<scriptsrc="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<script>
var $x = $("#x");
    $x.css("top", "10"); //set string type value
    alert($x.css("top"));
    $x.css("top",  10); //set number type value
    alert($x.css("top"));
</script>
</body>
</html>

果不其然,以上測試會先跳出"auto",再跳出"10px",意味著傳入字串"10"無效,傳入數字10才有作用。換句話說,當傳入數字,jQuery會加上"px",才被視為有效的top值,在jQuery函數中可以找到以下邏輯證實這點:

// If a number was passed in, add 'px' to the (except for certain CSS properties)
if ( type === "number"&& !jQuery.cssNumber[ origName ] ) {
    value += "px";
}

至此可推論是新版KendoUI加入的toString()闖禍。既知原因就好辦,kendoWindow宣告時以top: "6px"取代top: 6就能解決問題。無法理解加入.toString()的理由,但此一改版會導致API文件的範例失效,故可認定為Bug,就一併回報給原廠囉!


Viewing all articles
Browse latest Browse all 2311

Trending Articles