前幾天面試，問的第一個問題就是這個，但是我第一次面試過於緊張，也可能是基礎不扎實，特在此重新總結一下該問題的解答。
JavaScript
假設HTML相關代碼如下：
<style>
div {
width: 100px;
height: 100px;
border: 1px solid black;
}
</style>
<div id="a"></div>
<button id="b">點擊變色</button>
那么使用JS事件處理有3種寫法：
行內事件
在div標簽內加入onclick="document.getElementById('a').style.backgroundColor='pink';"
測試效果如下，符合預期。
如果響應函數在js中定義，則在行中調用時切記要加上()，即<button onclick='btnClick()'></button>。
onclick綁定
js代碼如下：
var div = document.getElementById('a');
var btn = document.getElementById('b');
btn.onclick = function(){
div.style.backgroundColor = 'pink';
}
// 也可以采用下面這種寫法
function btnClick(){}
btn.onclick = btnClick;
關於選取元素
要特別注意getElementById參數不需要加#，而且同系列函數常用的還有getElementsByClass和getElementsByTag，除了id選取其他都是得到數組，切記使用時要加下標。
還可以使用querySelector方法，使用如下：
var div = document.querySelector('#a');
與之配套的是querySelectorAll方法，返回數組。
關於改變顏色
- 改變顏色也有幾種方式，首先是通過給
style.property賦值的方式修改，但是屬性property要采用小駝峰命名法，如同我們上述所寫：
div.style.backgroundColor = 'pink';
這種方式如果要添加多個樣式則過於繁瑣。
- 還可以采用給
style.cssText賦值的方式修改（屬性名和寫css時一樣），如下：
div.style.cssText = 'background-color: pink';
但是采用這種方式進行修改，前面的cssText會被后面的覆蓋，例：
div.style.cssText = 'background-color: pink';
div.style.cssText = 'border-color: red';
在點擊后，顯示效果變為：
顯然覆蓋了前一句背景顏色，但是我們寫在style標簽中的樣式並沒有覆蓋。
- 我們還可以通過獲取樣式表對象，調取
insertRule和addRule方法來改變樣式（首先我們要有一個外部CSS文件，哪怕是空的也行），代碼如下
var sheet = document.styleSheets[0];
// insertRule
sheet.insertRule('div{background-color:pink;}');
//addRule
sheet.addRule('div', 'background-color:pink;');
兩者的參數稍微有些不同，可以點此查閱。使用這種方式，經測試不會覆蓋前面樣式。
（但是有點奇怪的是我更改border-color這個屬性時，insertRule修改不了，而addRule可以）
addEventListener
上述兩種方式屬於DOM Level0的事件處理模型，但它們沒法在同一個事件上綁定多個事件處理程序，接下來我們使用DOM Level2的事件處理模型來解答。
在一般瀏覽器上使用addEventListener添加事件，使用removeEventListener移除事件；在IE瀏覽器中使用attachEventListener添加事件，使用detachEventListener移除事件。
function btnClick() {
div.style.backgroundColor = 'pink';
}
//一般瀏覽器
div.addEventListener('click', btnClick);
//IE瀏覽器
div.attachEventListener('click', btnClick);
在JS一節中的樣式改變方式此處同樣適用。
推薦使用此種方式，詳情見此。
其實可以不需要按鈕，直接點擊div修改顏色，見這篇博客。
jQuery
首先要引入jquery文件：
<script src="./jquery-3.6.0.min.js "></script>
獲取元素
var $div = $('#a');
var $btn = $('#b');
有jquery封裝，獲取元素變得簡便許多。
綁定事件
同樣有類似JS的三種方式，此處直接一並寫了（行內一樣，不再贅述）：
function btnClick(){}
// click
$btn.click(btnClick);
//on
$btn.on('click', btnClick);
其中差距如同JS，on綁定多個事件可以直接在第一個參數字符串中間隔一個空格加上，如：
$btn.on('click mouseover', btnClick);
設置樣式
css()
//設置單個屬性
$div.css('background-color', 'pink');
//設置多個屬性
$div.css({'background-color': 'pink', 'border-color': 'red';})
添加class
//在style標簽中設置class
.pink{background-color: pink;}
//修改樣式
$div.addClass('pink');
Vue
最近正好在學習Vue，索性也寫一寫。
首先引入vue文件：
<style>
#a{
width: 100px;
height: 100px;
border: 1px solid black;
}
</style>
//寫好模板
<div id='app'>
<div id='a'></div>
<button>按鈕</button>
</div>
<script src="./vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {},
methods: {}
})
</script>
v-bind動態綁定樣式
在vue實例中定義相關變量和方法：
data:{
color: '';
},
methods:{
btnClick(){
this.color = 'pink';
}
}
在元素中綁定屬性和事件：
<div id="app">
<div :style='{backgroundColor: color}'></div>
<button @click='btnClick'>按鈕</button>
</div>
還可以直接設置綁定style，為了測試是否會覆蓋樣式我添加了一個按鈕及事件：
data: {
style: {},
},
methods: {
btnClick() {
this.style = {
'background-color': 'pink'
};
},
btnClick2() {
this.style = {
'border-color': 'red'
};
}
}
//div
<div :style='style'></div>
<button @click='btnClick'>按鈕1</button>
<button @click='btnClick2'>按鈕2</button>
點擊按鈕1：
點擊按鈕2：
解決辦法，將賦值改為添加屬性：
btnClick() {
Vue.set(this.style, 'background-color', 'pink');
},
btnClick2() {
Vue.set(this.style, 'border-color', 'red');
}
點擊按鈕1再點擊按鈕2后結果為：
如此不會覆蓋。
動態綁定class
div元素綁定屬性class：
//首先定義樣式
<style>
.pink{background-color: pink;}
</style>
<div :class='{pink: isPink}'></div>
修改vue實例的data和方法：
data: {
isPink: false,
},
methods: {
btnClick(){
this.isPink = true;
}
}
測試結果：點擊后正常顯示背景色。
也可以在class屬性中動態添加樣式class，實現方法有許多，我們就介紹到此。