JavaScript - 如果語句總是返回true

我有一些JavaScript，我想要在HTML中搜索類名稱，然後檢測該div內的幾個元素的高度，將它們加在一起，並顯示總高度一個警報。下面的代碼似乎完美運行，但我注意到代碼將運行，無論類名是什麼，即使該類不存在於HTML中。我怎樣才能重寫if語句，以便它只會在代碼碰到具有指定類名的div時才運行代碼？我不希望它檢測到錯誤的h1和p元素的高度。謝謝你的幫助。JavaScript - 如果語句總是返回true

HTML：

<div class="testing"> 
    <h1>Understanding Scope</h1> 
    <p>By understanding code's <em>scope</em>, we know when that code affects only one part of our code, or the entire codebase. If we create things that are <em>global</em> in scope, we are giving any code the supreme power to control our code. So we want to protect our code by being very careful when creating things that are global in scope. This is especially important if you plan on using JavaScript libraries like jQuery.</p> 
</div> 
<h1>Local Scope</h1> 
<p>JavaScript uses <em>function scope</em>, meaning every time we create a new function the scope changes. Any code inside that function is <em>local</em> to that function. Code that is local in scope is not accessible to outside code.</p>

的JavaScript：

function testing(){ 
     if (document.getElementsByClassName('testing')){ 
      var headerHeight = document.getElementsByTagName('h1')[0].offsetHeight; 
      var textHeight = document.getElementsByTagName('p')[0].offsetHeight; 
      var totalHeight = headerHeight + textHeight; 


      alert(totalHeight); 

     } 
    } 
testing();

來源

2015-05-28 Bryan

即使您的文檔查詢返回一個空數組，它仍然true

這是因爲[]是一個「真實「價值。

if ([]) { console.log("always true"); }

而是嘗試

var elems = document.getElementsByClassName("foo"); 

if (elems.length > 0) { 
    // ... 
}

如果你不介意以後訪問elems，你可以跳過中間變量

if (document.getElementsByClassName("foo").length > 0) // ...

每您的評論

var div = document.getElementsByClassName("testing"); 

if (div.length > 0) { 
    div[0].getElementsByTagName("h1")[0] ... 
    div[0].getElementsByTagName("p")[0] ... 
}

這將在div的上下文中找到代碼，而不是全局document上下文。

來源

2015-05-28 20:04:14 naomik

這似乎只是檢查該分區是否存在，然後繼續看整個的第一h1和p元素的高度文件。我希望它嚴格從該div中尋找第一個h1和p元素。 – Bryan

@Bryan，我提供了一個編輯來解決您的評論 – naomik

變化

if (document.getElementsByClassName('testing')){ //This will always be true

到

if (document.getElementsByClassName('testing').length){//This depends on lenght , could be 0

來源

2015-05-28 20:05:24 Zee

這似乎只是檢查是否存在div，然後繼續查找整個文檔的第一個h1和p元素的高度。我希望它嚴格從該div中尋找第一個h1和p元素。 – Bryan

我想你想使用的document.getElementById而不是document.getElementsByClassName。

我見過getElementsById以這種方式使用像這樣：

VAR elementExists =的document.getElementById（「目標ID」）;

哪些與您想要做的相似。

來源

2015-05-28 20:21:56 glctig

這裏的東西是，你用document.getElementsByClassName(something)創建。所以元素存在，但它是空。因此它有一個長度0。

var el = document.getElementsByClassName('testa'); 
console.log(el); // []

您可以檢查長度爲：

if(document.getElementsByClassName('testing').length > 0)

來源

2015-05-28 20:24:41 Sun

這似乎只是檢查是否存在div，然後繼續查找整個文檔的第一個h1和p元素的高度。我希望它嚴格從該div中尋找第一個h1和p元素。 – Bryan

JavaScript - 如果語句總是返回true

回答

相關問題