点击按钮触发div颜色改变的几种写法

目录

• JavaScript
  • 行内事件
  • onclick绑定
    • 关于选取元素
    • 关于改变颜色
  • addEventListener
• jQuery
  • 获取元素
  • 绑定事件
  • 设置样式
    • css()
  • 添加class
• Vue
  • v-bind动态绑定样式
  • 动态绑定class

前几天面试，问的第一个问题就是这个，但是我第一次面试过于紧张，也可能是基础不扎实，特在此重新总结一下该问题的解答。

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方法，返回数组。

关于改变颜色

1. 改变颜色也有几种方式，首先是通过给style.property赋值的方式修改，但是属性property要采用小驼峰命名法，如同我们上述所写：

div.style.backgroundColor = 'pink';

这种方式如果要添加多个样式则过于繁琐。

1. 还可以采用给style.cssText赋值的方式修改（属性名和写css时一样），如下：

div.style.cssText = 'background-color: pink';

但是采用这种方式进行修改，前面的cssText会被后面的覆盖，例：

div.style.cssText = 'background-color: pink';
div.style.cssText = 'border-color: red';

在点击后，显示效果变为：

显然覆盖了前一句背景颜色，但是我们写在style标签中的样式并没有覆盖。

1. 我们还可以通过获取样式表对象，调取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，实现方法有许多，我们就介绍到此。