排他思想（算法）

喝水都塞牙缝(//̀Д/́/)

于 2021-11-29 20:10:16 发布

阅读量93

点赞数

分类专栏： JavaScript 文章标签： java javascript 前端

本文链接：https://blog.youkuaiyun.com/m0_59854777/article/details/121618237

版权

JavaScript 按钮交互事件监听 CSS样式排他思想

关键词由优快云通过智能技术生成

JavaScript 专栏收录该内容

10 篇文章

订阅专栏

去除其他元素个性，唯我独尊

我这代码有四个按钮，点到谁，谁害羞脸变红

<!doctype html>
<html lang="en">
  <head>
  <meta charset="utf-8">
    <title>排他思想</title>	
  </head>

 <body>
        <button id="btn1">我是button1</button> 
        <button id="btn2">我是button2</button>	
		<button id="btn3">我是button3</button> 
        <button id="btn4">我是button4</button>	
        <script>
			    //排他思想（算法）
			    var btns = document.getElementsByTagName('button');  //获取元素
			    for(var i = 0;i < btns.length; i++) {  //修改属性
			    	btns[i].onclick = function(){
					    for(var i = 0;i < btns.length; i++) {  //去除所有按钮颜色
                            btns[i].style.backgroundColor = '';
					}
					    this.style.backgroundColor = 'pink';  //当前元素背景颜色改变
					}
			   } 
		</script>
 </body>
</html>