jquery - 调整元素大小时，jQuery 文档准备好不起作用
问题描述
当我运行以下代码段时，我尝试获取 div id = 'imgLeft' 的高度。有时它返回 18，有时它正确返回 238.375。我还使图像可点击，每当您单击图像时，它都会正确返回 238.375
js 代码位于 html 代码的底部。
大多数情况下，我在片段中得到了正确的答案，但它在我的网站上永远无法正常工作。代码是相同的。这是该网站的链接：https:www.sustainablewestonma.org/swag/work.html
#imgLeft,img,html,body{
width:375px;
max-width:375px;
}
div{
max-width:375px;
}<!DOCTYPE html>
<html lang='en'>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" >
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- <script src="../js/mobileNav2.js"></script>
<link rel="stylesheet" href="../css/mobileNav3.css?test=applesuckbigtimes">
<link rel="stylesheet" href="../css/home3.css?test=applesucksbig">
<link rel="stylesheet" href="../css/mobileFooter3.css?test=applesuck"> -->
<script src="https://www.sustainablewestonma.org/swag/public/js/mobileNav2.js"></script>
<link rel="stylesheet" href="https://www.sustainablewestonma.org/swag/public/css/mobileNav3.css?test=applesuckbigtimes">
<link rel="stylesheet" href="https://www.sustainablewestonma.org/swag/public/css/home3.css?test=applesucksbig">
<link rel="stylesheet" href="https://www.sustainablewestonma.org/swag/public/css/mobileFooter3.css?test=applesuck">
<title>work</title>
</head>
<body>
<div class="wrapper">
<div class="top" >
<div id='header'>
<img src="https://www.sustainablewestonma.org/swag/public/images/swag-logo.jpg" alt='logo'>
<div id='text'>Educate Inititiate Collaborate</div>
</div>
<section class="navigation">
<div class="nav-container">
<nav>
<div class="nav-mobile">
<a id="nav-toggle" href="#!"><span></span></a>
</div>
<ul class="nav-list">
<li><a href="#!">Home</a></li>
<li><a href="#!">About Us</a>
<ul class="nav-dropdown">
<li><a href="#!">Our Story</a></li>
<li><a href="#!">Our Work</a></li>
<li><a href="#!">SWAG Leaders</a></li>
<li><a href="#!">In the News</a></li>
</ul>
</li>
<li><a href="#!">Calendar</a></li>
<li><a href="#!">Take Action</a>
<ul class="nav-dropdown">
<li><a href="#!">Get Involved</a></li>
<li><a href="#!">Donate</a></li>
</ul>
</li>
<li><a href="#!">Resources</a></li>
</ul>
</nav>
<div id="socialMsgs">
<a href="mailto:swag@sustainablewestonma.org"><img class="fa" src="https://www.sustainablewestonma.org/wp-content/uploads/2019/09/mail3-blue.png" alt="mail"></a>
<a target="_blank" rel="noopener noreferrer" href="https://www.facebook.com/groups/1960906387454685/"><img class="fa facebook" src="https://www.sustainablewestonma.org/wp-content/uploads/2019/09/facebook-square-brands-blue.png" alt="FB"></a>
<a target="_blank" rel="noopener noreferrer" href="https://twitter.com/Weston_SWAG"><img class="fa twitter" src="https://www.sustainablewestonma.org/wp-content/uploads/2019/09/twitter-square-brands-blue.png" alt="TW"></a>
<a target="_blank" rel="noopener noreferrer" href="https://instagram.com/sustainablewestonactiongroup/"><img class="fa instagram" src="https://www.sustainablewestonma.org/wp-content/uploads/2019/09/instagram-brands-blue.png" alt="IS"></a>
</div>
</div>
</section>
</div>
<div class="middle">
<div id="container">
<div id="vision" style="display:none!important">
<span id="v1">Our Vision:</span><span id="v2">A healthy thriving sustainable community</span>
</div>
<!-- left -->
<div id="majorFlex">
<div id='left' class="noflex panel">
<div class='scrollContent'>
<a class='left' href="#"> </a>
<span class="nf1">Campaign Highlight</span>
<a class = right href='#center'>↓</a>
</div>
<div id="imgLeft" onclick="myFunction()">
<img id='xxx' src="https://www.sustainablewestonma.org/wp-content/themes/twentytwelve-child/uploads/2019DarlingFamily_20200411_5e91f99243017701660809.jpg" alt="Highlight">
</div>
<!-- <span class="imgCaption">Annual Town Clean Up</span>
<span class="nf2">Join us for the third Annual Town Cleanup!<br/>Every bit of help counts to keep our town beautiful!</span>
<div class="readme">
<span><a href="https://www.sustainablewestonma.org/our-work-detail/?tag=ACU2020" target="_blank">READ MORE</a></span>
</div> -->
<div class='homeTextFMT'>
<span class="imgCaption">Annual Town Clean Up</span>
<span class="nf2">Join us for the third Annual Town Cleanup!<br/>Every bit of help counts to keep our town beautiful!</span>
<span><a href="https://www.sustainablewestonma.org/our-work-detail/?tag=ACU2020" target="_blank">READ MORE</a></span>
</div>
</div>
<!-- center -->
<div id='center' class="noflex panel">
<div class='scrollContent'>
<a class='left' href="#left">↑</a>
<span class="nf1">Featured Action</span>
<a class = right href='#minorflex'>↓</a>
</div>
<div id="imgCenter">
<img src="https://www.sustainablewestonma.org/wp-content/themes/twentytwelve-child/uploads/Earth-Month_20200411_5e91f992437c3354440328.jpg" alt="Aaction">
</div>
<span class="imgCaption">April is Earth Month!</span><span class="nf2">Follow us for daily tips on how you<br>can do your part to help our planet!</span>
<div class="readme">
<span><a href="https://instagram.com/sustainablewestonactiongroup/" target="_blank">READ MORE</a></span>
</div>
</div>
<!-- right -->
<div id="minorflex" class='panel'>
<div class='scrollContent'>
<a class='left' href="#center">↑</a>
<span class="nf1">Get Involved</span>
<a class = right href='#'> </a>
</div>
<div class="4links">
<span><a href="https://www.sustainablewestonma.org/get-involved/">Sign up for our<br class="wp">Quarterly Newsletter</a></span>
</div>
<div class="4links">
<span><a href="https://www.sustainablewestonma.org/calendar/">Attend an<br class="wp">Event</a></span>
</div>
<div class="4links">
<span><a href="https://www.sustainablewestonma.org/get-involved/">Volunteer with<br class="wp">SWAG</a></span>
</div>
<div class="4links">
<span><a href="https://www.sustainablewestonma.org/donate/">Donate to help<br class="wp">our work</a></span>
</div>
</div>
</div>
</div>
</div>
<div class="bottom" >
<div id='footer'>
<form action='#' method='post' name='myFooter'>
<p id='ftCaption'>Help create a sustainable and healthy town of Weston</p>
<label>Join our mailing list:</label><br/>
<input id='myemail' name='email' placeholder='Email...' type='email' required>
<input id='mysubmit' type='submit' value='enter'>
</form>
<p id="cpyRight">Copyright © 2019, All Rights Reserved, Sustainable Weston Action Group </p>
</div>
</div>
</div>
<script>
function myFunction(){
var elmnt = document.getElementById("imgLeft");
var txt = "";
txt += "Height with padding: " + elmnt.clientHeight + "px<br>";
txt += "Height with padding and border: " + elmnt.offsetHeight + "px<br>";
var test = $("#imgLeft").height();
console.log(test);
console.log(txt);
}
$( document).ready(function(){
var viewHeight = $(window).height();
var tops = $(".top").eq(0).height();
var foot = $("#footer").height();
var bots = $(".bottom").eq(0).height();
var panels = $('.panel');
for (let i = 0;i<panels.length;i++){
$(".panel").eq(i).height(viewHeight - tops - foot)
};
$(".middle").eq(0).height(viewHeight - tops - foot);
$(".bottom").eq(0).height(foot + 500);
bots = $(".bottom").eq(0).height();
var middle = $(".middle").eq(0).height();
var panel = $('.panel').eq(0).height();
var imgLeft = $("#imgLeft").offset();
var homeTextFMT = $('.homeTextFMT').eq(0);
homeTextFMT.height(panel - imgLeft);
myFunction();
})
</script>
</body>
</html>解决方案
推荐阅读
- android - 颤振“包获取”失败并出现错误“无法读取文件 LocalFile ...”
- phalcon - 在哪里为 phalcon 4 中的自定义过滤器 css 代码创建文件？
- azure - 如何在 Azure DevOps 管道中使用 terraform 输出作为变量
- r - 你如何将两个数据框与 R 中的项目数量结合起来？
- dax - Expression.Error：找不到表的列“BackLogCount”。- PowerBI
- python - 如何使用wasd移动对象
- typescript - 从函数的返回结果中提取类型信息
- javascript - 如何使用异步？
- eclipse - 有没有办法添加一个快捷方式来安装我的 Maven 项目？
- python - 无效参数：indices[207,1] = 1611 不在 [0, 240) - Tensorflow 2.x (Python)