我只是想学习jQuery和Javascript。我开始接受概念，我觉得现实世界问题是最好的学习方式。
我下载了One Page Wonder Bootstrap模板，我只是想找到导航的outerHeight，并在警报上调用高度（以像素为单位）。
我正试图找到这个高度：
$('nav').outerHeight();
然后我尝试了几种方法来提醒那个高度：
alert(nav);
alert('nav');
alert($(nav));
alert($(nav));
我知道这可能很容易，但这不起作用。我需要将其作为一个功能吗？
这是HTML，虽然我不确定它是否需要。它使用标准导航。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>One Page Wonder - Start Bootstrap Template</title>
<!-- Bootstrap core CSS -->
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script src="vendor/jquery/jquery.min.js"></script>
<!-- Custom fonts for this template -->
<link href="https://fonts.googleapis.com/css?family=Catamaran:100,200,300,400,500,600,700,800,900" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Lato:100,100i,300,300i,400,400i,700,700i,900,900i" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="css/one-page-wonder.min.css" rel="stylesheet">
<script src="js/one-page-wonder.js"></script>
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-dark navbar-custom fixed-top">
<div class="container">
<a class="navbar-brand" href="#">Start Bootstrap</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#">Sign Up</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Log In</a>
</li>
</ul>
</div>
</div>
</nav>
<header class="masthead text-center text-white">
<div class="masthead-content">
<div class="container">
<h1 class="masthead-heading mb-0">One Page Wonder</h1>
<h2 class="masthead-subheading mb-0">Will Rock Your Socks Off</h2>
<a href="#" class="btn btn-primary btn-xl rounded-pill mt-5">Learn More</a>
</div>
</div>
<div class="bg-circle-1 bg-circle"></div>
<div class="bg-circle-2 bg-circle"></div>
<div class="bg-circle-3 bg-circle"></div>
<div class="bg-circle-4 bg-circle"></div>
</header>
<section>
<div class="container">
<div class="row align-items-center">
<div class="col-lg-6 order-lg-2">
<div class="p-5">
<img class="img-fluid rounded-circle" src="img/01.jpg" alt="">
</div>
</div>
<div class="col-lg-6 order-lg-1">
<div class="p-5">
<h2 class="display-4">For those about to rock...</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod aliquid, mollitia odio veniam sit iste esse assumenda amet aperiam exercitationem, ea animi blanditiis recusandae! Ratione voluptatum molestiae adipisci, beatae obcaecati.</p>
</div>
</div>
</div>
</div>
</section>
<section>
<div class="container">
<div class="row align-items-center">
<div class="col-lg-6">
<div class="p-5">
<img class="img-fluid rounded-circle" src="img/02.jpg" alt="">
</div>
</div>
<div class="col-lg-6">
<div class="p-5">
<h2 class="display-4">We salute you!</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod aliquid, mollitia odio veniam sit iste esse assumenda amet aperiam exercitationem, ea animi blanditiis recusandae! Ratione voluptatum molestiae adipisci, beatae obcaecati.</p>
</div>
</div>
</div>
</div>
</section>
<section>
<div class="container">
<div class="row align-items-center">
<div class="col-lg-6 order-lg-2">
<div class="p-5">
<img class="img-fluid rounded-circle" src="img/03.jpg" alt="">
</div>
</div>
<div class="col-lg-6 order-lg-1">
<div class="p-5">
<h2 class="display-4">Let there be rock!</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod aliquid, mollitia odio veniam sit iste esse assumenda amet aperiam exercitationem, ea animi blanditiis recusandae! Ratione voluptatum molestiae adipisci, beatae obcaecati.</p>
</div>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="py-5 bg-black">
<div class="container">
<p class="m-0 text-center text-white small">Copyright © Your Website 2018</p>
</div>
<!-- /.container -->
</footer>
<!-- Bootstrap core JavaScript -->
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
</body>
</html>
答案 0 :(得分：2)
将您的$('nav').outerHeight()分配到变量中，然后尝试稍后使用..在px中获取值，只需将其连接到变量的最后一个
var nav = $('nav').outerHeight();
console.log(nav + 'px');<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<nav class="navbar navbar-expand-lg navbar-dark bg-dark navbar-custom fixed-top">
<div class="container">
<a class="navbar-brand" href="#">Start Bootstrap</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#">Sign Up</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Log In</a>
</li>
</ul>
</div>
</div>
</nav>
答案 1 :(得分：1)
您需要将此高度指定给某个变量才能在以后使用它：
let height = $("nav").outerHeight();
alert(height);nav {
height: 150px;
width: 90%;
background-color: cyan;
padding: 10px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav></nav>
确保在呈现html时调用$("nav").outerHeight(); - 将<script>放到html的末尾或用window.onload = function() { ... };
答案 2 :(得分：1)
console.log($('nav').outerHeight());
console.log($('nav').height());<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
<ul>
<li>hello</li>
<li>hello</li>
<li>hello</li>
</ul>
</nav>
尝试使用控制台而不是警告它更好的方法并且易于调试。
答案 3 :(得分：0)
我一直都是正确的，但我的<script>标记位于<head>而不是</body>标记之上。一个菜鸟的错误。
我一直在使用Wordpress和Gravity Forms工作，需要在<head>中进行调用，否则会弹出控制台错误。从我的猜想开始。
谢谢Kirill指出来。