JavaScript或jQuery如何判断input标签css属性display是否为none
时间: 2024-03-12 19:50:25 浏览: 71
可以使用jQuery的`.is(":visible")`方法来判断元素是否可见,当元素的`display`属性值为`none`时,该方法会返回`false`。示例代码如下:
```
if ($("input").is(":visible")) {
// 元素可见
} else {
// 元素隐藏
}
```
另外,如果不想使用jQuery,可以使用JavaScript的`getComputedStyle()`方法来获取元素的计算样式,然后判断`display`属性值是否为`none`。示例代码如下:
```
var element = document.querySelector("input");
var style = window.getComputedStyle(element);
if (style.display !== "none") {
// 元素可见
} else {
// 元素隐藏
}
```
相关问题
jquery获取表单内父容器没有被display=none隐藏的表单name属性值部
你可以使用以下 jQuery 代码来获取表单内父容器没有被 display=none 隐藏的表单 name 属性值部分:
```javascript
$('form').find(':input').not(':hidden, [disabled], [aria-hidden="true"], [type="submit"], [type="button"]').filter(function() {
return $(this).parents().filter(function() {
return $(this).css('display') === 'none';
}).length === 0;
}).each(function() {
console.log($(this).attr('name'));
});
```
这段代码会遍历整个表单内所有的 input 元素,使用 `not` 过滤掉隐藏的表单元素,然后使用 `filter` 找到它们所在的父容器是否被隐藏,最后使用 `each` 循环输出每个元素的 name 属性值。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>layui</title> <meta name="renderer" content="webkit"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <link rel="stylesheet" href="./__PUBLIC__/layuimini/lib/layui-v2.5.5/css/layui.css" media="all"> <link rel="stylesheet" href="./__PUBLIC__/layuimini/css/public.css" media="all"> <script src="./__PUBLIC__/layuimini/lib/layui-v2.5.5/layui.js" charset="utf-8"></script> <script type="text/javascript" src="./__PUBLIC__/js/jquery-3.4.1.min.js"></script> <script type="text/javascript" src="./__PUBLIC__/js/common.js"></script> <style> .layui-table-cell { height: auto; line-height: 28px; } </style> </head> <body> <form action="" method="post" enctype="multipart/form-data" id="uploadForm"> <input style="display: none;" id="selectimginput" onchange="showPicImg(this.files);" name="file" type="file"/> </form> <form action="" method="post" enctype="multipart/form-data" id="uploadForm2"> <input style="display: none;" id="selectimginput2" onchange="showPicImg2(this.files);" name="file" type="file"/> </form>
这是一个包含了 layui 框架和一些自定义的样式和脚本的 HTML 页面。其中包含了两个表单用于上传文件,分别对应了 id 为 uploadForm 和 uploadForm2 的表单。上传文件的 input 元素使用了 display: none; 的样式来隐藏,而 onchange 事件则会触发一个名为 showPicImg 或 showPicImg2 的 JavaScript 函数,这些函数可能会用于展示上传的图片或者对上传的文件进行一些处理。
阅读全文