当前位置：首页 > JavaScript

js实现display

2026-04-06 00:10:37JavaScript

display属性的基本概念

display属性在CSS中用于控制元素的布局行为，常见值包括block、inline、inline-block、flex、grid等。通过JavaScript动态修改display属性可以实现元素的显示/隐藏或切换布局模式。

通过style属性修改display

直接通过元素的style属性设置display值是最简单的方式：

const element = document.getElementById('myElement');
element.style.display = 'none'; // 隐藏元素
element.style.display = 'block'; // 显示为块级元素

通过classList控制display

通过添加/移除CSS类来间接控制display属性更易于维护：

js实现display

.hidden {
  display: none;
}
.flex-container {
  display: flex;
}

const element = document.querySelector('.target');
element.classList.add('hidden'); // 隐藏
element.classList.remove('hidden'); // 显示
element.classList.toggle('flex-container'); // 切换flex布局

获取当前display值

获取元素当前应用的display值需要计算样式：

const element = document.getElementById('myElement');
const computedStyle = window.getComputedStyle(element);
const currentDisplay = computedStyle.display;
console.log(currentDisplay); // 输出当前display值

切换显示/隐藏状态

实现一个通用的显示/隐藏切换函数：

js实现display

function toggleVisibility(elementId) {
  const el = document.getElementById(elementId);
  if (el.style.display === 'none') {
    el.style.display = '';
  } else {
    el.style.display = 'none';
  }
}

动态创建带display属性的元素

创建新元素时直接设置display属性：

const newDiv = document.createElement('div');
newDiv.style.display = 'inline-block';
newDiv.textContent = '动态创建的元素';
document.body.appendChild(newDiv);

响应式display修改

结合媒体查询实现响应式display变化：

function checkScreenSize() {
  const element = document.getElementById('responsiveElement');
  if (window.innerWidth < 768) {
    element.style.display = 'block';
  } else {
    element.style.display = 'flex';
  }
}
window.addEventListener('resize', checkScreenSize);