如何獲取焦點并修改樣式

在CSS中，我們可以通過使用偽類來檢測元素是否獲得焦點，并據(jù)此修改其樣式，以下是一些常見的獲取焦點并修改樣式的方法：

1、使用:focus偽類

我們可以使用:focus偽類來檢測一個元素是否獲得焦點，并應用一些樣式，如果我們想要讓一個按鈕在獲得焦點時變得更大更突出，可以使用以下代碼：

button:focus {
  transform: scale(1.2);
  box-shadow: 0 0 10px blue;
}

2、使用JavaScript動態(tài)修改樣式

除了使用CSS偽類外，我們還可以使用JavaScript來動態(tài)修改元素的樣式，我們可以編寫一個函數(shù)來檢測一個元素是否獲得焦點，并根據(jù)需要應用樣式：

function focusStyle(element) {
  if (element.matches(':focus')) {
    element.style.transform = 'scale(1.2)';
    element.style.boxShadow = '0 0 10px blue';
  } else {
    element.style.transform = 'scale(1)';
    element.style.boxShadow = 'none';
  }
}

我們可以將這個函數(shù)綁定到元素的focus和blur事件上，以確保樣式始終與元素的焦點狀態(tài)相匹配：

element.addEventListener('focus', focusStyle);
element.addEventListener('blur', focusStyle);

需要注意的是，雖然使用JavaScript可以為我們提供更多的靈活性，但過度使用可能會導致代碼變得復雜且難以維護，我們應該盡量使用CSS偽類來簡化代碼并保持其可讀性。