正文

JavaScript获取id的display值，可以这样操作：

/0 浏览量
0415

在 JavaScript 中，获取 HTML 元素的样式属性，比如 display 的值，可以通过多种方法实现。以下是一些常用的方法，以及如何使用这些方法来获取特定元素的 display 属性值。

1. 使用 element.style.display 属性

这是最直接的方法，可以直接访问元素的 style 对象中的 display 属性。

// 假设我们有一个 id 为 'myElement' 的元素
var element = document.getElementById('myElement');
var displayValue = element.style.display;
console.log(displayValue); // 输出元素的 display 值，如 'block', 'none' 等

2. 使用 getComputedStyle 方法

这个方法可以获取应用到元素上的最终计算样式，包括通过 CSS 计算后的样式值。使用它时，不需要像 element.style.display 那样修改元素的样式。

var element = document.getElementById('myElement');
var computedStyle = window.getComputedStyle(element);
var displayValue = computedStyle.display;
console.log(displayValue); // 输出最终计算出的 display 值

3. 使用 CSS 属性选择器

如果你知道元素的样式属性名，你也可以使用属性选择器来获取它。

var element = document.getElementById('myElement');
var displayValue = element.getAttribute('style');
console.log(displayValue); // 输出 'display: block; ...'，包括所有应用在元素上的样式属性

请注意，这个方法会返回包含所有样式的字符串，而不仅仅是 display 属性的值。

注意事项

  • 获取 display 的实际值：当使用 getComputedStyle 方法时，它会考虑到样式优先级、浏览器特定的样式表等，因此通常会返回实际应用到元素上的值。
  • 即时性：使用 element.style.display 可以获取元素当前应用到的值，即使这个值是动态变化的。
  • 兼容性：getComputedStyle 方法在所有现代浏览器中都是可用的，但对于旧版浏览器可能需要前缀 -webkit- 或 -moz-。

代码示例

下面是一个结合了以上方法的简单示例：

// 定义一个函数，用于获取元素的 display 值
function getDisplayStyle(elementId) {
    var element = document.getElementById(elementId);
    if (element) {
        var displayValue = window.getComputedStyle(element).display;
        console.log('The display value for ' + elementId + ' is: ' + displayValue);
    } else {
        console.log('Element with id ' + elementId + ' not found.');
    }
}

// 调用函数，获取 id 为 'myElement' 的元素的 display 值
getDisplayStyle('myElement');

这段代码将输出元素 myElement 的实际 display 值。

-- 展开阅读全文 --