jquery获取html diaplay的值document

原创

mob64ca12ec8020 2023-10-04 12:03:56 ©著作权

文章标签 jQuery HTML html 文章分类 jQuery 前端开发

©著作权归作者所有：来自51CTO博客作者mob64ca12ec8020的原创作品，请联系作者获取转载授权，否则将追究法律责任

jQuery 获取 HTML display 的值

介绍

在网页开发中，我们经常需要获取并操作 HTML 元素的样式。其中，display 属性是一个常用的属性，用于控制元素的显示与隐藏。通过 jQuery，我们可以方便地获取和修改 HTML 元素的 display 属性的值。

本文将介绍如何使用 jQuery 获取 HTML 元素的 display 属性的值，并提供相应的代码示例。

准备工作

在使用 jQuery 之前，需要先引入 jQuery 库。可以通过以下方式引入 jQuery：

<script src="

同时，为了演示方便，我们将在 HTML 中添加一个按钮和一个元素，并通过按钮的点击事件来获取元素的 display 属性值。

<button id="get-display-btn">获取元素的 display 属性</button>
<div id="target-element" style="display: none;">目标元素</div>

获取 display 属性值

要获取一个元素的 display 属性值，可以使用 jQuery 的 css() 方法。该方法可以获取指定元素的样式属性值。

下面是一个获取 display 属性值的示例代码：

$('#get-display-btn').click(function() {
  var displayValue = $('#target-element').css('display');
  alert('目标元素的 display 属性值为：' + displayValue);
});

在上述代码中，我们通过 $('#target-element') 选择器选中了目标元素，并使用 css('display') 方法获取了目标元素的 display 属性值。最后，我们使用 alert() 方法弹出了获取到的属性值。

示例演示

当我们点击按钮时，将会弹出一个提示框，显示目标元素的 display 属性值。在初始状态下，目标元素的 display 属性值为 "none"，即隐藏状态。

状态图

stateDiagram
    [*] --> 隐藏状态
    隐藏状态 --> 显示状态 : 点击按钮
    显示状态 --> 隐藏状态 : 点击按钮

下面是完整的示例代码：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>jQuery 获取 HTML display 的值</title>
  <script src="
  <script>
    $(document).ready(function() {
      $('#get-display-btn').click(function() {
        var displayValue = $('#target-element').css('display');
        alert('目标元素的 display 属性值为：' + displayValue);
      });
    });
  </script>
  <style>
    #target-element {
      display: none;
    }
  </style>
</head>
<body>
  <button id="get-display-btn">获取元素的 display 属性</button>
  <div id="target-element">目标元素</div>
</body>
</html>