第一种写法 获取dom 触发点击事件
<div class="textStyle">文字颜色转换</div>
<button>开关</button>
<script>
let but = document.querySelector('button')
let texts =document.querySelector('.textStyle')
let bool = false
but.onclick = function(){
bool = !bool
if(bool){
texts.style.color = 'greenyellow'
}else {
texts.style.color = 'red'
}
}
第二种 事件监听
<div class="textStyle">文字颜色转换</div>
<button>开关</button>
<script>
let but = document.querySelector('button')
let texts =document.querySelector('.textStyle')
let bool = false
but.addEventListener('click',function(){
bool = !bool
if(bool){
texts.style.color = 'greenyellow'
}else {
texts.style.color = 'red'
}
})
第三种 内联写法
<button onclick="btn()">开关</button>
<script>
function btn(){
console.log('====================================');
console.log('点击事件');
console.log('====================================');
}
温故而知新 加油!!!