此代码没有更改我的#image div的CSS top属性的原因是什么？
$(function() {
console.log($("#image").css('top'));
$("#image").css("top",($("#maincontent").outerHeight(true)/2)-255 + "px");
console.log($("#image").css('top'));
});
我对jQuery不是很熟练，所以我理解其中的一些错误，或者全部错误，但帮助解决问题和告诉我我做错了什么将非常有用。
以下是JSFIDDLE：https://jsfiddle.net/tg3vvh3v/1/
我的整个HTML文档看起来像：
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- TemplateBeginEditable name="doctitle" -->
<title>Untitled Document</title>
<!-- TemplateEndEditable -->
<!-- TemplateBeginEditable name="head" -->
<!-- TemplateEndEditable -->
<link href="../Module 10/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
};
$(function() {
console.log($("#image").css('top'));
$("#image").css("top",($("#maincontent").outerHeight(true)/2)-255 + "px");
console.log($("#image").css('top'));
});
</script>
<body onload="MM_preloadImages('../Module 10/Home-Page-Roll.png','../Module 10/Intro-Roll.png','../Module 10/Lesson-Roll.png','../Module 10/Final-Roll.png','../Module 10/website_design_dpk.png','../Module 10/website_design_dpk-roll.png','../Module 10/tools-html-coding.jpg','../Module 10/Website Desiging.png','../Module 10/Final Exam.jpg')">
<div id="header">
<a href="../Module 10/Index.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Header','','../Module 10/website_design_dpk-roll.png',1)"><img src="../Module 10/website_design_dpk.png" alt="Header that leads back to index page" width="850" height="320" id="Header" /></a> </div>
<div id="nav">
<a href="../Module 10/Index.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Home','','../Module 10/Home-Page-Roll.png',1)"><img src="../Module 10/Home-Page-Org.png" alt="Link to home page" width="161" height="80" id="Home" /></a>
<a href="../Module 10/Intro.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Intro','','../Module 10/Intro-Roll.png',1)"><img src="../Module 10/Intro-Orig.png" alt="Link to introduction of lesson" width="161" height="80" id="Intro" /></a>
<a href="../Module 10/Lesson.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Lesson','','../Module 10/Lesson-Roll.png',1)"><img src="../Module 10/Lesson-Orig.png" alt="Link to lesson page" width="161" height="80" id="Lesson" /></a>
<a href="../Module 10/Final.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Final','','../Module 10/Final-Roll.png',1)"><img src="../Module 10/Final-Orig.png" alt="Link to Final of lesson" width="161" height="80" id="Final" /></a></div>
<div id="wrapper">
<!-- TemplateBeginEditable name="Main Content" -->
<div id="maincontent">
<h2>Lesson 2.04: What makes a good web site?</h2>
<p><BR>
</p>
<p>All new web designers can learn a great deal about what looks good and what looks not so good by studying the design of pages they see on the Web. A new web designer has many factors to think about while producing their pages including the content, the overall look of the pages, the color scheme, the aesthetics, and the ease of navigation. Please keep the following elements in mind when designing your own web pages later in this module.</p>
<p><BR>
</p>
<h3> Design Tips</h3>
<p><BR>
</p>
<p>Here are a few tips that will help any web designer create great web pages and ultimately great web sites! </p>
<p><BR>
</p>
<p>Keep your content concise and free of grammatical, spelling, and typographical errors. Your content should be short and to the point. It should also be looked upon as a credible source of information. </p>
<p><BR>
</p>
<p>Keep your web pages consistent. By using the same color scheme, heading format, text, buttons, and style, you make it easy for the viewer to understand they are still on your web site and have not been taken to another location on the Web by clicking on a link. </p>
<p><BR>
</p>
<p>Always use contrasting colors for your background and text. This makes it easy for the viewer to read. Steer clear of using busy backgrounds that are hard to read. Please remember it is very difficult to read text that is put on a textured or patterned background. </p>
<p><BR>
</p>
<p> It is considered "good design" to maintain pages that are simple and do not use all the bells and whistles that are available. Using animations, gimmicks, flashy backgrounds, etc. should all be done in moderation. </p>
<p><BR>
</p>
<p>Do not use large images. Large images take a long time to download. Please keep this in mind and use small images that add meaning to the content of your page. Do not use images simply for decoration.</p>
<p><BR>
</p>
<p> The rule of thumb is that the image should be no larger than 300 pixels on either side or 25k in size. If the image is larger and it is important to show the entire image, then you should use a thumbnail image on your web page and link the thumbnail image to the larger image.</p>
<p><BR>
</p>
<p>Preview your pages in multiple browsers to make sure you are happy with the way they look. Often pages will look different in Firefox, Internet Explorer, Safari, and others. </p>
<p><BR>
</p>
<p>Always check to make sure your links are properly working and to check your links to the outside frequently. A good web designer knows that revisions and updates are mandatory to maintain a good web site.</p>
<p><BR>
</p>
<h3>Web Design Resources</h3>
<p><BR>
</p>
<p>Please visit the following links to learn more about web design.</p>
<i> <p>• https://www.gov.uk/designprinciples</p>
<p>• http://www.famouslogos.org/good-website-design-tips</p>
<p>• http://andrewpritchard.com/2007/website-design-what-not-to-do/</p>
<p>• http://problemwebsites.com/</p>
</i>
</div>
<!-- TemplateEndEditable --><!-- TemplateBeginEditable name="Background image" -->
<div id="image" style="background-image: ;">
</div>
<!-- TemplateEndEditable -->
</div>
<div id="footer">
<h3>Thank you for visitng WWVS! Please remember to check your pace schedule and remember if work is not submitted every 2 weeks, you will be removed from your course! </h3>
</div>
</body>
</html>
CSS可以在我的jsfiddle上找到。
http://jsfiddle.net/tg3vvh3v/2
$(function() {
console.log($("#image").css('top'));
$("#image").css("top",($("#maincontent").outerHeight(true)/2)-255 + "px");
console.log($("#image").css('top'));
});
我将jquery添加到fiddle javascript cog中，并使其在head中包含脚本，这样在您尝试执行内联绑定之前，您的函数就会存在（通常应该避免）。正如您所看到的，控制台显示顶部已更改。
内联绑定通常需要在标记尝试绑定函数之前已经定义好这些函数。如果他们不这样做，可能会导致错误，从而使脚本停止运行。
最好在逻辑内部进行绑定，以便将标记和逻辑分离，这样可以提供更好的解耦，并可以集中逻辑，在某些情况下还可以减少冗余。
*编辑：控制台日志只是为了让我能看到更改。它们不应该对脚本功能产生任何影响，并且可以删除。
请尝试以下操作：
$(function() {
$( '#image' ).css({
'top': "" + ($("#maincontent").outerHeight(true)/2)-255 + "px"
});
});
但在你的jsfiddle中，看起来你想要的是：
$(function() {
$( '#Header' ).css({
'top': "" + ($("#maincontent").outerHeight(true)/2)-255 + "px"
});
});
但对我来说，更重要的是，你有2个id有头。outterdiv"one_answers"内部图像。
将id更改为唯一。收割台主管。页眉图像。根据需要更改代码。