js修改样式的方法
1、对象.className(‘类名’)
2、setAttribute(),getAttribute()和removeAttribute()
3、JQuery的addClass()、removeClass()
- 使用js来对类名进行增删改查以便到达我们需要的功能，这是一个很实用的操作。
- 但当我们需要设置多个类名时，原生的可能比较多人熟知的className()就不能用了，因为它会覆盖，不能在原有的类名上增加，很鸡肋！
- 原生js的setAttribute(),getAttribute()和removeAttribute()：是对class属性的设置，不能增加class的属性值，只能覆盖，或者把class的属性写成‘classA classB classC ’的字符串
- 之前学习JQuery的时候，觉得它对类名的修改很直接好用，如addClass().removeClass()，但如今JQuery库被广泛抛弃！
- 为了更好地实用地操作样式，下面整理2种实用性强的不易淘汰的办法：
4.原生js的classList
- 对象.classList.add(‘类名’)
- 对象.classList.remove(‘类名’)
- 对象.classList.toggle(‘类名’) ; toggle，有这个类名就删除，没有就添加，相当于开关；跟display：none（元素的隐藏和显示）、布尔值的切换，相对的两个属性结合，可以实现很多开关、切换样式等功能，很实用
- 对象.classList.replace(‘旧类名，新类名’)
- 对象.classList.contains(‘类名’)，返回布尔值，查看是否拥有这个类名
<style>
.bgRed {
background-color: red;
}
.bgYellow {
background-color: yellow;
}
.bgGreen {
background-color: green;
}
.bigFont {
font-size: 30px;
}
.pinkFont {
color: pink;
}
div {
width: 300px;
height: 300px;
border: 2px solid black;
}
</style>
</head>
<body>
<div>
测试文字
</div>
<button>切换背景颜色</button>
<script>
window.onload = function () {
let box = document.querySelector('div')
box.classList.add('bigFont')
box.classList.add('bgGreen')
box.classList.add('pinkFont')
console.log(box.classList);
console.log(box.className);
if (box.classList.contains('pinkFont')) {
box.classList.remove('bigFont');
}
let btn = document.querySelector('button')
btn.addEventListener('click', function () {
box.classList.toggle('bgGreen')
})
}
</script>
</body>
参考MDN：developer.mozilla.org/zh-CN/docs/…
MDN的代码如下：
const div = document.createElement('div');
div.className = 'foo';
// 初始状态：<div class="foo"></div>
console.log(div.outerHTML);
// 使用 classList API 移除、添加类值
div.classList.remove("foo");
div.classList.add("anotherclass");
// <div class="anotherclass"></div>
console.log(div.outerHTML);
// 如果 visible 类值已存在，则移除它，否则添加它
div.classList.toggle("visible");
// add/remove visible, depending on test conditional, i less than 10
div.classList.toggle("visible", i < 10 );
console.log(div.classList.contains("foo"));
// 添加或移除多个类值
div.classList.add("foo", "bar", "baz");
div.classList.remove("foo", "bar", "baz");
// 使用展开语法添加或移除多个类值
const cls = ["foo", "bar"];
div.classList.add(...cls);
div.classList.remove(...cls);
// 将类值 "foo" 替换成 "bar"
div.classList.replace("foo", "bar");
5.在vue中对样式增删改查
使用对象+布尔值
- v-bind: 绑定计算属性，这个计算属性返回class和class的布尔值(是否启用这个class)；
- 使用计算属性，可以实现不用在html的标签再修改类名
- 新的class在style中添加，在vue实例的data中修改class的布尔值，就可以作用在对应的html标签上
<div id="div1" class="region" :class="getClass()">
{{text}}
<button @click="changeColor">changeColor</button>
<button @click="changeShape">changeShape</button>
</div>
<script>
let div1 = new Vue({
el: '#div1',
data: {
text: '文字',
isShape: false,
isBluebg: false,
},
methods: {
changeColor: function () {
this.isBluebg = !this.isBluebg;
},
changeShape: function () {
this.isShape = !this.isShape;
},
getClass: function () {
return { shape: this.isShape, bluebg: this.isBluebg }
}
}
})
</script>
<style>
.region {
width: 100px;
height: 100px;
border-radius: 50%;
background-color: red;
}
.shape {
border-radius: 0;
}
.bluebg {
color: antiquewhite;
background-color: blue;
}
</style>
关键点总结：
用js对样式增删改查：
- 原生就用classList
- vue就用对象+布尔值+计算属性
