检测元素是否可见(不使用jquery)

Question

我试图检测我给出id的html元素是否可见而不使用jquery.

上下文:

在忘记的用户密码页面中,我有一个表单,用户输入他的登录名并点击提交.在那之后,如果他设置了一个挑战问题,它将被显示,他将能够回答这个问题并再次提交.(之前的相同按钮).

我的问题:

当用户点击提交时,在IE中,如果他多次点击它,他每次点击它都会收到一封电子邮件.

我的想法:

我想在单击此提交按钮后禁用该按钮,但我只能在两个条件正确时禁用它:

1. 如果用户已经提交了他的登录名(没有错误).
2. 用户有一个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做这个,我会很感激.

Answer 1

谷歌帮助我了解jQuery是如何做到的,你也可以这样做:

在jQuery 1.3.2中,如果浏览器报告的offsetWidth或offsetHeight大于0,则元素是可见的.

发行说明

搜索源代码给了我这个:

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