在Web開發中,我們常常需要通過JavaScript來動態改變頁面的樣式。其中一種方法就是利用input元素的點擊事件來改變CSS樣式。具體實現如下:
// 獲取input元素 var input = document.querySelector('input'); // 給input元素添加點擊事件 input.addEventListener('click', function () { // 獲取要改變樣式的元素 var target = document.querySelector('p'); // 改變樣式 target.style.color = 'red'; target.style.fontSize = '24px'; });
上面的示例代碼中,首先通過querySelector方法獲取input元素,并給其添加點擊事件。當點擊input元素時,會觸發回調函數,在函數內部我們可以獲取要改變樣式的目標元素,這里我們選擇了一個p元素。接下來就是通過JavaScript代碼來動態地改變p元素的樣式。
在這個示例中,我們將p元素的文字顏色改變為紅色,字體大小改變為24像素。當然,您可以根據自己的需求來修改樣式,只需要在改變樣式時使用style屬性即可。