【发布时间】：2010-12-01 19:23:01
【问题描述】：
我正在尝试使用 jquery 在 asp.net 页面中调整包含 100% 高度/宽度图像的 div 的大小。我有一些代码可以作为一个简单的 html 页面正常工作。这里是：
<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>
由于某种原因，只要我将这个确切的代码放在表单标签 runat=server 之间的 .aspx 页面中，重新调整大小就会停止工作。具体来说，这是我损坏的 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>
有人知道它为什么不起作用以及如何解决它吗？
【问题讨论】：
-
如果您在静态 HTML 页面中放入相同的
<!DOCTYPE>，它仍然有效吗？ -
如果 jquery 已加载或未加载，请在 firebug 中检查？中断意味着页面已损坏或 jquery 无法正常工作
-
另一个区别是 ..在 asp.net 页面中你有一个 doctype 但在普通 html 中你没有 doctype
-
有趣的是，删除 doctype 确实为我解决了问题。谢谢！