JavaScriptで@mediaのCSSのみを変更する方法

方法: CSSクラスの追加と削除この方法では、JavaScriptで特定のCSSクラスを追加または削除することによって、@mediaルール内のCSSを変更します。

// CSSクラスを追加する例
function addClass() {
  var element = document.getElementById("targetElement");
  element.classList.add("newClass");
}
// CSSクラスを削除する例
function removeClass() {
  var element = document.getElementById("targetElement");
  element.classList.remove("newClass");
}

方法: スタイルの直接変更この方法では、JavaScriptで要素のスタイルプロパティを直接変更することによって、@mediaルール内のCSSを変更します。

// スタイルの直接変更の例
function changeStyle() {
  var element = document.getElementById("targetElement");
  element.style.setProperty("color", "red");
  element.style.setProperty("font-size", "20px");
}

方法: メディアクエリを使用したスタイルの適用この方法では、JavaScriptでメディアクエリを作成し、条件に基づいてスタイルを適用します。

// メディアクエリを使用したスタイルの適用の例
function applyMediaStyle() {
  var mediaQuery = window.matchMedia("(max-width: 600px)");
  if (mediaQuery.matches) {
    var element = document.getElementById("targetElement");
    element.style.setProperty("color", "blue");
    element.style.setProperty("font-size", "16px");
  }
}

これらは、JavaScriptを使用して@mediaルール内のCSSを変更するいくつかの方法の例です。あなたの具体的な要件に応じて、これらの方法を適用し、カスタマイズすることができます。