Detect if an element is visible (without using jQuery)

前端未结

关注

 5  730

执笔经年

I\'m trying to detect if an html element I gave an id is visible or not without using jquery.

The context:

In the forgotten user password page,

相关标签:

5条回答

悲&欢浪女

2021-02-07 11:44

I wrote this some time back. This handles a lot of cases to my knowledge. This actually checks if the element is being seen by the user in it's current state.

Checks for display, visibility, opacity, overflow quirk and does it recursively till we go till the document node.

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);
            }
        }
    }

0 讨论(0)

爱一瞬间的悲伤

2021-02-07 11:44

On general_Submit.Label button click call a function Callfun() and then disabled button

<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;
    }

0 讨论(0)

名媛妹妹

2021-02-07 11:45
As I was thinking about disabling the button, I'm here to write that I was wrong about my idea of solution for this problem, because it would be really costly to make it works. This way, after studying, testing some ideas and reading the ideas @gdoron and @AmeyaRote brought, I figured out that a simple solution was to hide the 'submit' button after clicking on it (the page is refreshed, the validation is checked and the button is available again after this process). So, here is the solution to solve the problem to avoid the user of clicking more than once on the submit button, for this particular case where I cannot disable it (if I disable after clicking, the form was not being submited):

The HTML

I just added the onclick attribute calling a javascript function I created to hide the button:
```
<p id="loginSubmitLink">
    <input id="general_Submit.Label" type="submit" onclick ="avoidDoubleSubmit();" value="general_Submit.Label" />" />
</p>
```
The 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>
}
```
0 讨论(0)
发布评论:

提交评论
- 加载中...
温柔的废话

2021-02-07 11:46
Google helped me finding out how jQuery does it, you can do the same:

In jQuery 1.3.2 an element is visible if its browser-reported offsetWidth or offsetHeight is greater than 0.

Release notes

Searching the source code gave me this:
```
// The way jQuery detect hidden elements, and the isVisible just adds "!".
elem.offsetWidth === 0 && elem.offsetHeight === 0
```
0 讨论(0)
发布评论:

提交评论
- 加载中...

遇见更好的自我

2021-02-07 11:52

Please see this it's customary seldom code might be useful

<!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>

above code gives the visibility status of the div using it's ID as U required.

0 讨论(0)