jquery.css，.height，.width在asp.net中的簡單使用

我想使用jquery調整在asp.net頁面中包含100％高度/寬度圖像的div的大小。我有一些代碼可以很好地作爲一個簡單的html頁面。那就是：jquery.css，.height，.width在asp.net中的簡單使用

<html> 
<head> 
<title>Image Resize Example</title> 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> 
<script type="text/javascript"> 
$(document).ready(function() { 
    $("#SizeSelect").change(function() { 
     var newDim = $(this).val(); 
     $("div.pillContainer").height(newDim); 
     $("div.pillContainer").width(newDim); 
    }); 
}); 
</script> 
<style type="text/css">  
    div.pillContainer { 
    width: 70px; 
     height: 70px; 
     display: block; 
     margin: 20px; 
    } 
    div.pillContainer img { 
     width: 100%; 
     height: 100%; 
    } 
</style> 
</head> 
<body> 

<div class="pillContainer"><img src="http://www.marvinandshea.com/Images/thumbs/friends_thumbs/friends%20(24).JPG" /></div> 

<b>Size:</b> <select id="SizeSelect" name="SizeSelect" > 
<option value="50 px">Small</option> 
<option value="70 px">Medium</option> 
<option value="90 px">Large</option> 
</select> 
</body> 
</html>

出於某種原因，當我把這個確切的代碼在.aspx頁面中RUNAT =服務器，重新調整大小退出工作形式標記之間。具體而言，這裏是我破碎的aspx頁面：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="MyMediHealth.Interface.WebForm1" %> 

<!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>Image Resize Example</title> 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> 
<script type="text/javascript"> 
$(document).ready(function() { 
    $("#SizeSelect").change(function() { 
     var newDim = $(this).val(); 
     $("div.pillContainer").height(newDim); 
     $("div.pillContainer").width(newDim); 
    }); 
}); 
</script> 
<style type="text/css"> 
    div.pillContainer { 
    width: 70px; 
     height: 70px; 
     display: block; 
     margin: 20px; 
    } 
    div.pillContainer img { 
     width: 100%; 
     height: 100%; 
    } 
</style> 
</head> 

<body> 
<form id="form1" runat="server"> 

<div class="pillContainer"><img src="http://www.marvinandshea.com/Images/thumbs/friends_thumbs/friends%20(24).JPG" /></div> 

<b>Size:</b> <select id="SizeSelect" name="SizeSelect" > 
    <option value="50 px">Small</option> 
    <option value="70 px">Medium</option> 
    <option value="90 px">Large</option> 
</select> 

</form> 
</body>

有人知道爲什麼它不工作，以及如何解決它？

來源

2010-12-01 Marvin

如果你在你的靜態HTML頁面中放入相同的``，它還能工作嗎？ – 2010-12-01 19:29:13

檢查螢火蟲，如果jQuery的加載或不？打破意味着頁面被破壞或jquery不工作 – kobe 2010-12-01 19:33:09

一個更多的區別是..在asp.net頁面你有一個文檔類型，但在一般的HTML你沒有文檔類型 – kobe 2010-12-01 19:34:35

一個更好的問題是：爲什麼它在任何一個版本中都工作。 :)

您正在發送「50 px」（或其他）到jQuery的高度函數。嘗試只通過改變你的選擇，以發送號碼來代替：

<option value="50">Small</option> 
<option value="70">Medium</option> 
<option value="90">Large</option>

改變這個固定爲我在ASP.net。（之前沒有工作，就像你說的那樣）

我還沒有測試過你的HTML版本，看看它爲什麼起作用。

編輯：爲了記錄，我無法讓你的其他版本在JSFiddle中工作。我想你在將它移植到ASP.net之前已經改變了它，並沒有意識到你破壞了它？

來源

2010-12-01 19:34:42 clifgriffin

對我來說工作得很好，雖然你錯過了.aspx代碼塊中的結束標記。

來源

2010-12-01 19:36:56 Derek

值與其單位之間沒有空格。刪除空格，和它的作品：

<select id="SizeSelect" name="SizeSelect" > 
    <option value="50px">Small</option> 
    <option value="70px">Medium</option> 
    <option value="90px">Large</option> 
</select>

它也會，如果你刪除這兩個空間和單位，clifgriffin建議工作。如果值僅爲數字，則width和height方法將添加px。

當您在沒有文檔類型的頁面中使用它時，它會以怪癖模式呈現，並且規則更放鬆。值和單位之間的空間仍然不被允許，但有些瀏覽器會使用該值並假設單位爲px，並忽略該空間之後的內容。

來源

2010-12-01 19:38:44 Guffa

jquery.css，.height，.width在asp.net中的簡單使用

回答

相關問題