点击按钮触发div颜⾊改变的⼏种写法
⽬录
前⼏天⾯试，问的第⼀个问题就是这个，但是我第⼀次⾯试过于紧张，也可能是基础不扎实，特在此重新总结⼀下该问题的解答。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="ElementById('a').style.backgroundColor='pink';"
测试效果如下，符合预期。
如果响应函数在js中定义，则在⾏中调⽤时切记要加上()，即<button onclick='btnClick()'></button>。
onclick绑定
js代码如下：
var div = ElementById('a');
var btn = ElementById('b');
div.style.backgroundColor = 'pink';
}
// 也可以采⽤下⾯这种写法
function btnClick(){}
关于选取元素
要特别注意getElementById参数不需要加#，⽽且同系列函数常⽤的还有getElementsByClass和getElementsByTag，除了id选取其他都是得到数组，切记使⽤时要加下标。
还可以使⽤querySelector⽅法，使⽤如下：
var div = document.querySelector('#a');
与之配套的是querySelectorAll⽅法，返回数组。
关于改变颜⾊
1. 改变颜⾊也有⼏种⽅式，⾸先是通过给style.property赋值的⽅式修改，但是属性property要采⽤⼩驼峰命名法，如同我们上述所写：
div.style.backgroundColor = 'pink';
这种⽅式如果要添加多个样式则过于繁琐。
2. 还可以采⽤给style.cssText赋值的⽅式修改（属性名和写css时⼀样），如下：
div.style.cssText = 'background-color: pink';
但是采⽤这种⽅式进⾏修改，前⾯的cssText会被后⾯的覆盖，例：
div.style.cssText = 'background-color: pink';
div.style.cssText = 'border-color: red';
在点击后，显⽰效果变为：
显然覆盖了前⼀句背景颜⾊，但是我们写在style标签中的样式并没有覆盖。
3. 我们还可以通过获取样式表对象，调取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(){}
$btn.click(btnClick);
//on
$('click', btnClick);
其中差距如同JS，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: {},
改变button按钮的形状methods: {}
})
</script>
v-bind动态绑定样式
在vue实例中定义相关变量和⽅法：
data:{
color: '';
},
methods:{
btnClick(){
}
}
在元素中绑定属性和事件：
<div id="app">
<div :style='{backgroundColor: color}'></div>
<button @click='btnClick'>按钮</button>
</div>
还可以直接设置绑定style，为了测试是否会覆盖样式我添加了⼀个按钮及事件：
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，实现⽅法有许多，我们就介绍到此。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。