Javascript 我的jquery函数不是'；t为我要求的元素设置top属性？_Javascript_Jquery_Html_Css_Position

Javascript 我的jquery函数不是'；t为我要求的元素设置top属性？

javascript jquery html css

Javascript 我的jquery函数不是'；t为我要求的元素设置top属性？,javascript,jquery,html,css,position,Javascript,Jquery,Html,Css,Position,此代码没有更改my#image div的CSStop属性的任何原因 $(function() { console.log($("#image").css('top')); $("#image").css("top",($("#maincontent").outerHeight(true)/2)-255 + "px"); console.log($("#image").css('top')); }); 我对jQuery不是很熟练，所以我理解其中的一些错误，或者全部错误，

此代码没有更改my

#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不是很熟练，所以我理解其中的一些错误，或者全部错误，但是帮助解决问题和告诉我我做错了什么都是非常有用的

以下是JSFIDLE：

我的整个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 &quot;good design&quot; 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>


无标题文件
函数MM_swapImgRestore（）{//v3.0
变量i，x，a=document.MM_sr；用于（i=0；a&&i）
第2.04课：什么是好网站？



所有新的网页设计师都可以通过研究他们在网页上看到的网页设计来了解哪些网页看起来好，哪些网页看起来不好。新的网页设计师在制作网页时需要考虑很多因素，包括内容、网页的整体外观、配色方案、美学以及导航的方便性。在本模块后面设计您自己的网页时，请记住以下内容



设计技巧



这里有一些技巧可以帮助任何网页设计师创建伟大的网页，最终创建伟大的网站



保持你的内容简洁，没有语法、拼写和印刷错误。你的内容应该短小精悍，切中要害。它也应该被视为可靠的信息来源



保持网页的一致性。通过使用相同的配色方案、标题格式、文本、按钮和样式，您可以让浏览者轻松地理解它们仍然在您的网站上，并且没有通过单击链接被带到web上的其他位置



始终为背景和文本使用对比色。这使查看者易于阅读。避免使用难以阅读的繁忙背景。请记住，在纹理或图案背景上阅读文本非常困难



维护简单的页面，不使用所有可用的铃声和口哨，这被认为是“好的设计”。使用动画、噱头、浮华的背景等都应该适度



不要使用大图像。下载大图像需要很长时间。请记住这一点，并使用小图像为页面内容添加意义。不要仅将图像用于装饰



经验法则是，图像的两侧不应大于300像素或25k大小。如果图像较大，且显示整个图像很重要，则应在网页上使用缩略图，并将缩略图链接到较大的图像



在多个浏览器中预览您的页面，以确保您对它们的外观感到满意。在Firefox、Internet Explorer、Safari和其他浏览器中，页面的外观通常会有所不同



经常检查以确保你的链接正常工作，并经常检查你与外部的链接。一个好的网页设计师知道，为了维护一个好的网站，必须进行修改和更新



网页设计资源



请访问以下链接以了解有关网页设计的更多信息
•https://www.gov.uk/designprinciples
•http://www.famouslogos.org/good-website-design-tips
•http://andrewpritchard.com/2007/website-design-what-not-to-do/
•http://problemwebsites.com/
感谢您访问WWV！请记住检查您的进度表，并记住如果未每两周提交一次作业，您将被从课程中删除！

CSS可以在我的

上找到，请尝试以下方法：


$（函数（）{
$（'#image'）.css({
“top”：“+（$（“#maincontent”）.outerHeight（true）/2）-255+“px”
});
});

但在您的JSFIDLE中，看起来您需要这样：


$（函数（）{
$（'#标题'）.css({
“top”：“+（$（“#maincontent”）.outerHeight（true）/2）-255+“px”
});
});

但对我来说，更重要的是，你有两个id，都有标题，分别是“outter div”和“inner image”

将id更改为唯一的。标题main。标题图像。根据需要更改代码。

我将jquery添加到fiddle javascript cog中，并使其在头部包含脚本，以便在您尝试进行内联绑定（通常应避免）之前，您的函数将存在。正如您所看到的，控制台显示顶部已更改

内联绑定通常需要在标记尝试绑定函数之前定义这些函数。如果它们不这样做，则可能导致错误，从而停止脚本

最好在逻辑内部进行绑定，这样可以将标记和逻辑分开，从而提供更好的解耦，并可以集中逻辑，在某些情况下还可以减少冗余

*编辑：控制台日志只是为了让我能看到更改。它们不应该对脚本功能有任何影响，可以删除。

可能是因为您在

（“#image”）之前缺少了一个dollarsign

没有改变任何东西如果没有看到CSS的其余部分应用于

#图像

，则无法解释原因。图像大小和位置可能受到过度约束，导致应用极其复杂的规则来解决过度约束的位置/大小。唯一现实的调试方法是检查应用的CSS并在浏览器的调试器工具集中计算属性。一个基本问题是

#image

div已修复/绝对定位？您的小提琴有一些错误。我在您的文档中放置了一个控制台日志，该日志未打印。请确保先修复错误，因为这可能会导致整个脚本

$(function() {
    console.log($("#image").css('top'));
    $("#image").css("top",($("#maincontent").outerHeight(true)/2)-255 + "px");
    console.log($("#image").css('top'));
});