我的 jquery 函数没有为我要求的元素设置 top 属性的原因是什么？
Any reason my jquery function isn't setting the top attribute for the element I asked it to?
为什么这段代码没有改变我的 #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.
上找到
试试这个：
$(function() {
$( '#image' ).css({
'top': "" + ($("#maincontent").outerHeight(true)/2)-255 + "px"
});
});
但是在你的 jsfiddle 中，你似乎想要这个：
$(function() {
$( '#Header' ).css({
'top': "" + ($("#maincontent").outerHeight(true)/2)-255 + "px"
});
});
但对我来说更重要的是你有 2 个 ID header。外部 div "and" 内部图像。
将 ID 更改为唯一。 header-main。 header-image。根据需要更改代码。
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 齿轮，并使其在头部包含脚本，以便在您尝试进行内联绑定（通常应该避免）。如您所见，控制台显示顶部已更改。
内联绑定通常需要在标记尝试绑定它们之前定义函数。如果他们不这样做，这可能会导致错误，从而停止您的脚本。
最好在你的逻辑内部进行绑定，这样你就可以将标记和逻辑分开，从而提供更好的解耦，并可以集中你的逻辑，在某些情况下减少冗余。
*编辑：控制台日志只是为了让我看到更改。它们应该不会对脚本功能产生任何影响，可以将其删除。
为什么这段代码没有改变我的 #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.
上找到试试这个：
$(function() {
$( '#image' ).css({
'top': "" + ($("#maincontent").outerHeight(true)/2)-255 + "px"
});
});
但是在你的 jsfiddle 中，你似乎想要这个：
$(function() {
$( '#Header' ).css({
'top': "" + ($("#maincontent").outerHeight(true)/2)-255 + "px"
});
});
但对我来说更重要的是你有 2 个 ID header。外部 div "and" 内部图像。
将 ID 更改为唯一。 header-main。 header-image。根据需要更改代码。
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 齿轮，并使其在头部包含脚本，以便在您尝试进行内联绑定（通常应该避免）。如您所见，控制台显示顶部已更改。
内联绑定通常需要在标记尝试绑定它们之前定义函数。如果他们不这样做，这可能会导致错误，从而停止您的脚本。
最好在你的逻辑内部进行绑定，这样你就可以将标记和逻辑分开，从而提供更好的解耦，并可以集中你的逻辑，在某些情况下减少冗余。
*编辑：控制台日志只是为了让我看到更改。它们应该不会对脚本功能产生任何影响，可以将其删除。