檢測元素是否可見（不使用jQuery）

我試圖檢測一個html元素是否可見或不使用jquery。檢測元素是否可見（不使用jQuery）

上下文：

在忘記用戶密碼頁面，我有一個表格，其中用戶輸入上提交自己的登錄名和點擊。之後，如果他設置了一個chalenge問題，它將被顯示，他將能夠回答這個問題並再次提交。（之前的相同按鈕）。

我的問題：當用戶點擊提交，在IE中，如果他點擊了幾次

，他會得到一個電子郵件，他每點擊它的時間。

我想什麼：

我想點擊這個提交按鈕後，關閉按鈕，但我只能禁用它，如果兩個條件是正確的：

如果用戶已經提供他的登錄名（沒有錯誤）。
用戶有一個chalenge問題註冊，他回答正確。

我不能改變這個過程，所以我想過在答案的字段中添加一個id並檢查它是否可見。如果是，並且用戶單擊提交按鈕，我想要在標籤上應用屬性禁用按鈕。我不知道的是如何做到這一點，而不使用jQuery。

使用jQuery我可以做這樣的事情：

if($('#secretAns').is(':visible')) { 
    //i think it could be the solution 
    $('#general_Submit.Label').attr(disabled, disabled); 

}

適用於：

<div id="secretAns" class="loginTxtFieldWrapper"> 
    <font color='red'>*</font><input type="text" name="secretAns" /> 
    <input type="hidden" name="isAnswerPage" value="1"/> 
</div> 
<p id="loginSubmitLink"> 
    <input id="general_Submit.Label" type="submit" value="general_Submit.Label" />" /> 
</p>

我覺得很難尋找純JavaScript的解決方案，因爲每個人都傾向於使用jQuery和我不能在我的應用程序中使用它，所以如果有人可以幫助我用純JavaScript來做到這一點，我會感激。

來源

2013-01-02 periback2

檢查jQuery的源代碼，看看他們在用'：visible'選擇器做什麼。 – gdoron

可能重複[Javascript：如何檢查元素是否可見？]（http://stackoverflow.com/questions/11391452/javascript-how-to-check-if-element-is-visible） – xyz

@Ajinkya，你注意到「重複」是一個jQuery問題，對吧？ – gdoron

谷歌幫我找出的jQuery是怎麼做的，你可以這樣做：

在jQuery中1.3.2的元素是可見的，如果其瀏覽器的報道offsetWidth或的offsetHeight大於0

Release notes

搜索源代碼給了我這個：

// The way jQuery detect hidden elements, and the isVisible just adds "!". 
elem.offsetWidth === 0 && elem.offsetHeight === 0

來源

2013-01-02 12:37:15 gdoron

只是FYI：我upvoted :) – xyz

@gdoron，不錯的投籃！這是真的......我會找出解決方案，並在我找到它的時候在這裏發佈。謝謝。 +1 – periback2

我加了我的答案只是爲了顯示我的問題的解決方案，但我的問題的標題的答案可以是你的答案。我只是不明白offsetwidth或offsetheight是如何。我瞭解它的方法來檢查可見性，但我仍然會進一步搜索它。非常感謝 – periback2

關於general_Submit。標籤按鈕點擊調用一個函數Callfun（），然後禁用按鈕

<input id="general_Submit.Label" onclick="Callfun()" type="submit" value="<ezmi18n:message key="general_Submit.Label" />" /> 

    function Callfun() 
    { 
    document.getElementById("general_Submit.Label").disabled = true; 
    }

來源

2013-01-02 12:44:47

請參閱本是習慣很少的代碼可能是有用的

<!DOCTYPE html> 
<html> 
<body> 
<div id="one" style="visibility: hidden;">The content of the body element is displayed in your browser. 
</div> 

<div id="two" style="visibility: visible;"> I'm Cool 
</div> 

<div onclick="push();"> Click me </div> 
<script> 
function push() { 
a = document.getElementById("one").style.visibility; 
alert("one "+a); 

b = document.getElementById("two").style.visibility; 
alert("one "+b); 
} 
</script> 
</body> 
</html>

上面的代碼中給出了div的可見性狀態使用它的ID爲你需要。

來源

2013-01-02 12:45:51

不僅僅是'style.visibilty'。 – gdoron

您可以設置可見的計數器變量並像使用它（visible_counter）一樣使用它，並遵循代碼的其餘部分。 –

事實上，如果未設置屬性（我認爲這是原因），則style.visibility返回null，而如果.offsetWidth不可見，則返回null，如果它可見，則返回正值。所以我相信@gdoron是最好的方式 – periback2

因爲我在考慮關閉按鈕，所以我在這裏寫下我對這個問題的解決方案的想法是錯誤的，因爲使它工作真的很昂貴。這樣，在學習，測試一些想法並閱讀@gdoron和@AmeyaRote帶來的想法之後，我發現一個簡單的解決方案是在點擊它之後隱藏「提交」按鈕（頁面刷新，檢查驗證並且該按鈕在此過程之後再次可用）。所以，這裏是解決問題的方法，以避免用戶在提交按鈕上多次點擊，對於這種我無法禁用它的情況（如果我點擊後禁用，表單並未被冒充）：

的HTML

我剛添加的onclick屬性調用javascript函數我創建隱藏按鈕：

<p id="loginSubmitLink"> 
    <input id="general_Submit.Label" type="submit" onclick ="avoidDoubleSubmit();" value="general_Submit.Label" />" /> 
</p>

JavaScript的

function avoidDoubleSubmit() { 
    <c:if test="${not empty secretQues}"> 
     event_addEvent(window,'load',function(){document.ResetPasswordForm.secretAns.focus();}); 
     document.getElementById('general_Submit.Label').style.display ='none'; 
    </c:if> 
}

來源

2013-01-03 10:58:27 periback2

我寫了這段時間回來。據我所知，這處理了很多案例。這實際上檢查用戶是否在當前狀態下看到該元素。

檢查顯示器，可見性，不透明度，溢出怪癖，並遞歸直到文檔節點。

function isVisible(el) { 
     while (el) { 
      if (el === document) { 
       return true; 
      } 

      var $style = window.getComputedStyle(el, null); 

      if (!el) { 
       return false; 
      } else if (!$style) { 
       return false; 
      } else if ($style.display === 'none') { 
       return false; 
      } else if ($style.visibility === 'hidden') { 
       return false; 
      } else if (+$style.opacity === 0) { 
       return false; 
      } else if (($style.display === 'block' || $style.display === 'inline-block') && 
       $style.height === '0px' && $style.overflow === 'hidden') { 
       return false; 
      } else { 
       return $style.position === 'fixed' || isVisible(el.parentNode); 
      } 
     } 
    }

來源

2017-06-18 06:48:18 gauravmuk

檢測元素是否可見（不使用jQuery）

回答

相關問題