根据屏幕大小更改按钮颜色

Question

我想要实现的是当我的设备尺寸小于 736 像素时，按钮应该有动画效果。我的按钮可以正常工作，但是，我很难适应特定的屏幕尺寸。

$(window).resize(function() {
  if ($(window).width() <= 736) {
    // do something
    
    let myBtn = document.querySelector(".btn");
    let btnStatus = false;

    myBtn.style.background = "#FF7F00";

    function bgChange() {
      if (btnStatus == false) {
        myBtn.style.background = "#FF0000";
        btnStatus = true;
      }
      else if (btnStatus == true) {
        myBtn.style.background = "#FF7F00";
        btnStatus = false;
      }
    }

    myBtn.onclick = bgChange;
  }
});

.btn {
  width: 200px;
  height: 100px;
  text-align: center;
  padding: 40px;
  text-decoration: none;
  font-size: 20px;
  letter-spacing: .6px;
  border-radius: 5px;
  border: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button class="btn">CLICK ME</button>

Answer 1

这是您尝试使用的实现：

class 改变按钮样式而不是 style,
原版 JavaScript 而不是 jQuery。

使用 class 是个好主意，因为它将样式保留在 CSS 和 JavaScript 代码之外。

最好尽可能使用原版 JavaScript。

这是两个新的 classes:

.btn-small-screen {
  background: #FF7F00;
}

.btn-clicked {
  background: #FF0000;
}

.btn-small-screen 当 window 较小时应用 class，单击按钮时切换 .btn-clicked。

这是 JavaScript 代码：

let myBtn = document.querySelector('.btn');
let isSmallWindow = () => window.innerWidth <= 736;

function toggleButtonOnClick () {
  myBtn.classList.toggle('btn-clicked');
}

function setButtonMode () {
  if (isSmallWindow()) {
    myBtn.classList.add('btn-small-screen');
    myBtn.addEventListener('click', toggleButtonOnClick);
  } else  {
    myBtn.classList.remove('btn-small-screen');
    myBtn.classList.remove('btn-clicked');
    myBtn.removeEventListener('click', toggleButtonOnClick);
  }
}

// setup mode on resize
window.addEventListener('resize', setButtonMode);

// setup mode at load
window.addEventListener('load', setButtonMode);

参考文献：

一个工作示例：

let myBtn = document.querySelector('.btn');
let isSmallWindow = () => window.innerWidth <= 736;

function toggleButtonOnClick () {
  myBtn.classList.toggle('btn-clicked');
}

function setButtonMode () {
  if (isSmallWindow()) {
    myBtn.classList.add('btn-small-screen');
    myBtn.addEventListener('click', toggleButtonOnClick);
  } else  {
    myBtn.classList.remove('btn-small-screen');
    myBtn.classList.remove('btn-clicked');
    myBtn.removeEventListener('click', toggleButtonOnClick);
  }
}

// setup small mode on resize
window.addEventListener('resize', setButtonMode);

// setup small mode at load
window.addEventListener('load', setButtonMode);

    .btn {
      width: 200px;
      height: 100px;
      text-align: center;
      padding: 40px;
      text-decoration: none;
      font-size: 20px;
      letter-spacing: .6px;
      border-radius: 5px;
      border: none;
    }

    .btn-small-screen {
      background: #FF7F00;
    }

    .btn-clicked {
      background: #FF0000;
    }

<button class="btn">CLICK ME</button>

注意：我省略了一项优化，这样代码会更容易理解。

请注意，setButtonMode() 每次都会更改 DOM，即使它可能已经设置为所需的模式。这是低效的。

为了提高效率并只在必要时更改DOM，您可以引入一个状态变量（称为smallMode），并在适当的时候将其设置为真。像这样：

let smallMode = false;

function setButtonMode () {
  if (isSmallWindow()) {
    if (!smallMode) {
      myBtn.classList.add('btn-small-screen');
      myBtn.addEventListener('click', toggleButtonOnClick);
      smallMode = true;
    }
  } else if (smallMode)  {
    myBtn.classList.remove('btn-small-screen');
    myBtn.classList.remove('btn-clicked');
    myBtn.removeEventListener('click', toggleButtonOnClick);
    smallMode = false;
  }
}

根据屏幕大小更改按钮颜色

Change button color based on screen size

html

javascript

css

viewport

responsive-design