JavaScript切换颜色

鼠标事件  onmouseover(),onmouseout(),ondblclick()

<html>
    <head>
    <meta charset="utf-8">
    <title>鼠标事件</title>
    <style type="text/css">
    #div1{
     width:200px;
     height:200px;
     background-color:green;
    }
    </style>
    </head>
    <body>
        <div id="div1" οnclick="show(this,'yellow');"
        οnmοuseοver="show(this,'red');"
        οnmοuseοut="show(this,'blue');"
        οndblclick="show(this,'green')">ttt</div>
        <script>
          function show(obj,color)
          {
              obj.style.backgroundColor=color;
          }
        </script>
    </body>
</html>
改变颜色

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在uniapp中,你可以使用条件渲染来实现按钮点击切换颜色的功能。具体实现方法如下: 1. 首先,在`<button>`标签中添加一个动态的`class`属性,用来控制按钮的颜色。例如: ```html <template> <button class="my-btn" :class="{ active: isActive }" @click="toggleButton"> {{ buttonText }} </button> </template> ``` 以上代码中,`my-btn`是自定义的样式类,`active`是用来控制按钮颜色的类名,`isActive`是一个数据属性,用来控制`active`类名的出现与否。 2. 接着,在`<script>`标签中,定义`toggleButton`方法,用来切换`isActive`属性的值,从而实现按钮颜色切换。例如: ```javascript <script> export default { data() { return { buttonText: "点击我", isActive: false, }; }, methods: { toggleButton() { this.isActive = !this.isActive; }, }, }; </script> ``` 以上代码中,当按钮被点击时,`toggleButton`方法会将`isActive`属性的值取反,从而实现按钮颜色切换。 3. 最后,在`<style>`标签中,定义`.active`类的样式,用来控制按钮的颜色。例如: ```css <style> .my-btn { color: #fff; background-color: #333; border: none; padding: 10px 20px; border-radius: 5px; } .active { background-color: #f00; } </style> ``` 以上代码中,`.my-btn`是自定义的样式类,用来设置按钮的一般样式,`.active`是用来控制按钮颜色的类名,设置为红色背景色。 通过以上步骤,点击按钮时,按钮的颜色就可以切换了。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值