ChatGpt前端代码实现《点击变色功能》

效果-点击按钮变色

效果-增加过渡效果

完整代码如下

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<style>div{/* 过渡效果 */transition:.5s;overflow: hidden;}.div1{width: 100px;height: 10px;background-color: pink;}.div2{width: 100px;height: 100px;background-color: #f05922;}
</style>
<body><button onclick="change()">点击变色</button><div id="aaa" class="div1" index="1"><p>买买买</p><p>去结账</p></div>
</body>
<script>var div = document.querySelector('div')// getAttribute// console.log(div.getAttribute('id'));// console.log(div.getAttribute('class'));// console.log(div.getAttribute('index'));// setAttribute// div.setAttribute('id','bbb');// div.setAttribute('class','div2');// div.setAttribute('index','2');console.log(div.getAttribute('id'));console.log(div.getAttribute('class'));console.log(div.getAttribute('index'));function change(){if(div.getAttribute('class') == 'div1'){div.setAttribute('class','div2');}else{div.setAttribute('class','div1');}}</script>
</html>

解析：用到了两个操作属性

1、getAttribute获取属性

<style>.div1{width: 100px;height: 100px;background-color: pink;}
</style>
<body><div id="app" class="div1" index="1" ></div>
</body>
<script>var div = document.querySelector('div')console.log(div.getAttribute('id'));console.log(div.getAttribute('class'));console.log(div.getAttribute('index'));
</script>

2、setAttribute修改属性

    .div1{width: 100px;height: 100px;background-color: pink;}.div2{width: 100px;height: 100px;background-color: #dd5c25;}
</style>
<body><div id="app" class="div1" index="1" ></div>
</body>
<script>var div = document.querySelector('div')div.setAttribute('id','bbb')div.setAttribute('class','div2')div.setAttribute('index','2')console.log(div.getAttribute('id'));console.log(div.getAttribute('class'));console.log(div.getAttribute('index'));
</script>