italia2024/js/_enchants/_setStyles-breakpoint.js

Italia 2024 assets

(function () {
//setStyles-breakpoint.js
const BREAKPOINT = 744; //ブレークポイント

function setStyles() {
  let elements = Array.from(document.querySelectorAll("[style_sp], [style_pc]"));
  const windowWidth = window.innerWidth;

  for (let element of elements) {
    let styleValue;

    if (windowWidth < BREAKPOINT) {
      //スマートフォン用のスタイル
      styleValue = element.getAttribute('style_sp');
    } else {
      //PC用のスタイル
      styleValue = element.getAttribute('style_pc');
    }

    if (styleValue) {
      //現在のスタイルを取得
      let currentStyle = element.getAttribute('style') || '';
      
      //新しいスタイルを適用
      let newStyle = currentStyle.replace(/width:[^;]+;?|height:[^;]+;?/g, '') + styleValue;
      element.setAttribute('style', newStyle);
    }
  }
}

//デバウンス関数
function debounce(func, wait) {
  let timeout;
  return function executedFunction(...args) {
    const later = () => {
      clearTimeout(timeout);
      func(...args);
    };
    clearTimeout(timeout);
    timeout = setTimeout(later, wait);
  };
}

//デバウンスされたsetStyles関数
const debouncedSetStyles = debounce(setStyles, 200);

//イベントリスナーの設定
document.addEventListener('DOMContentLoaded', setStyles);
window.addEventListener('load', debouncedSetStyles);
window.addEventListener('resize', debouncedSetStyles);

//初期実行
if (document.readyState === 'complete' || document.readyState === 'interactive') {
  setStyles();
}
})();