jQuery使用css函數

所以即時通訊只是玩弄我的jQuery，並陷入了相當奇怪的問題。所以我得到的div的寬度這樣jQuery使用css函數

block_width = $(".grid_block").css("width");

現在我願意做一些與寬度假設

container_width = block_width * 21;

現在如果將提醒container_width我會得到Nah insted的數字，我究竟做錯了什麼？

2011-12-14 Linas

我與width()

var block_width = $(".grid_block").width(); 
var container_width = block_width * 21; 
alert(container_width)

2011-12-14 16:06:51

你得到NaN，而不是數字，因爲寬度值您收到的是一個字符串包括單位

IE：

"500px" 
"3em" 
"27.2%"

您可以解析與parseInt

width = ...css('width'); 
width = parseInt(width);

數

但這是完全沒有必要的，因爲jQuery的width method。

width = ...width(); //numeric value

2011-12-14 16:02:28 zzzzBov

這是因爲block_width是int型的;

block_width = intParse($(".grid_block").css("width").replace('px')); 
    container_width = block_width * 21

或事件更好

block_width = $(".grid_block").width(); 
container_width = block_width * 21

2011-12-14 16:02:51

.css("width")返回表示寬度的字符串，"px"所附，即"___px"。將某個數字與該字符串相乘失敗（"12px" * 2的計算結果爲NaN）。

您可以查看功能.width()以獲取寬度，並.width(x)設置寬度（均爲數字）。

2011-12-14 16:03:21 pimvdb

你分配一個字符串作爲數學運算的一部分...

試試這個：

block_width = parseInt($(".grid_block").css("width"));

2011-12-14 16:03:28 Napolux

你的CSS（「寬度」）返回一個字符串，而不是數字。使用parseInt/parseFloat轉換它，或使用jquery .width（）函數（返回數字）。

2011-12-14 16:03:43

嗯，這很奇怪，因爲如果我會嘗試提醒block_width我會得到數字，反正感謝您的快速回答 – Linas 2011-12-14 16:04:27

您可以檢查`typeof（block_width）`，這是字符串，以防您查詢css方法。 – 2011-12-14 16:06:31

從末尾刪除PX和你的乘法之前做一個parseInt函數

block_width = block_width.replace("px", "") 
container_width = parseInt(block_width) * 21;

2011-12-14 16:03:45 Shyju

做同樣的事情，你需要使用jQuery的寬度（）方法。.css（width）和.width（）之間的區別在於後者返回無單位像素值（例如400），而前者返回值與單位完好無損（例如，400px）。請檢查http://api.jquery.com/width/ 沒有必要做解析來獲取其他帖子建議的寬度。

2011-12-14 16:07:02 kvc

Hy，我來過同樣的問題。例如，.css("width")返回「20px」。我做了什麼，這是肯定有點不正常，你也許可以用正則表達式解決這個問題，但我所做的就是：

var newWidth = parseInt(($('something').css("width")).split("px")[0])+xx;//xx... Size you want to add 
$('something').css("width",newWidth);

我的意思是，你可以在一個線路都還沒有初始化一個新的變量，但如果有人想閱讀你的代碼，並沒有進入jQuery或JavaScript的，我認爲它更好地分裂它。希望這可以幫助你！

2011-12-14 18:45:53

回答