用于响应式的 Java 脚本片段 - Javascript

Javascript 是一种脚本语言，用于在 Web 页面上实现交互式功能和动态效果。在响应式 Web 设计中，Javascript 可以帮助我们实现各种功能，比如响应式导航栏、响应式图片和视频、响应式表格等等。

以下是一些用于响应式设计的 Javascript 片段：

1. 响应式导航栏

对于响应式导航栏，我们可以使用下面的 Javascript 代码：

function toggleMenu() {
  var menu = document.getElementById('menu');
  menu.classList.toggle('active');
}

该代码会选中一个 id 为 "menu" 的 HTML 元素，并在其上应用一个名为 "active" 的 CSS 类。这个 CSS 类定义了一个带有透明度和过渡效果的菜单。在点击菜单按钮时，该函数会切换菜单的显示和隐藏。

2. 响应式图片和视频

如果你想在不同设备上显示不同尺寸的图片或视频，可以使用以下 Javascript 代码：

function updateMedia() {
  var media = document.getElementsByTagName('img');
  for (var i = 0; i < media.length; i++) {
    var src = media[i].getAttribute('data-src');
    var width = media[i].getAttribute('data-width');
    var height = media[i].getAttribute('data-height');
    if (width && window.innerWidth < parseInt(width)) {
      media[i].src = src.replace('.jpg', '') + '-' + width + '.jpg';
      media[i].setAttribute('width', width);
      media[i].setAttribute('height', height);
    } else {
      media[i].src = src;
      media[i].removeAttribute('width');
      media[i].removeAttribute('height');
    }
  }
}

该代码会更新所有带有 "data-src"、"data-width"、"data-height" 属性的图片和视频元素。在窗口大小变化时，它会检查当前设备的宽度，并根据需要更新图片和视频的大小和 URL。

3. 响应式表格

对于响应式表格，我们可以使用下面的 Javascript 代码：

function wrapTable() {
  var tables = document.getElementsByTagName('table');
  for (var i = 0; i < tables.length; i++) {
    var wrapper = document.createElement('div');
    wrapper.classList.add('table-wrapper');
    tables[i].parentNode.insertBefore(wrapper, tables[i]);
    wrapper.appendChild(tables[i]);
  }
}

该代码会选中所有的表格元素，并将它们包装在一个新的 DIV 元素中。该 DIV 元素带有一个名为 "table-wrapper" 的 CSS 类，该类定义了一个自适应的表格容器。这样，无论表格的大小如何，它都会适应父容器的大小。

以上这些 Javascript 片段可以帮助我们实现响应式 Web 设计中的一些常见功能。希望你喜欢！