使用js控制css中classList方法,对元素类名进行操作

使用javascript中classLis方法操作元素上面的类名进行增删除改切换等操作

<template>
    <div class="con">
        <div>
            <div id="box" class="a b"></div>
            <el-button class="button" type="primary" @click="add">新增</el-button>
            <el-button class="button" type="danger" @click="del">删除</el-button>
            <el-button class="button" type="warning" @click="edit">修改</el-button>
            <el-button class="button" type="warning" @click="toggle">切换</el-button>
            <el-button class="button" type="warning" @click="contains">判断</el-button>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            inputValue: ''
        };
    },
    mounted() {
        this.init();
    },
    created() {},
    methods: {
        add() {
            var box = document.getElementById('box');
            //添加元素上面指定类名
            box.classList.add('blue', 'green');
        },
        del() {
            var box = document.getElementById('box');
            //删除元素上面指定类名
            box.classList.remove('blue', 'green');
        },
        toggle() {
            var box = document.getElementById('box');
            //类似于jquery上的toggle  有就删除，没有就添加
            box.classList.toggle('pink');
        },
        contains() {
            var box = document.getElementById('box');
            //判断类名是否存在 存在返回true 不存在返回false;
            var c = box.classList.contains('pink');
            c ? box.classList.remove('pink') : box.classList.add('pink');
        }
    },
    destroyed() {}
};
</script>
<style scoped>
.con {
    margin-top: 100px;
    margin-left: 100px;
}

.red {
    color: red;
    background-color: red;
}
.green {
    color: green;
    background-color: green;
}

.blue {
    color: blue;
    background-color: blue;
}
.pink {
    color: pink;
    background-color: pink;
}
#box {
    width: 100px;
    height: 100px;
}
</style>