专栏首页编程微刊前端切图|点击按钮div变色

前端切图|点击按钮div变色

图片.png

图片.png

   <!DOCTYPE html>  
    <html>  
        <head>  
            <title>点击按钮div变色.html</title>  
            <meta charset="utf-8" />  
        </head>  
        <body>  
            <!--点击改变当前div的颜色,所以要给onclick这个事件的函数传递当前的对象即可-->  
            <div style="width:300px;height:30px;padding-top:10px;background:#3bb4f2;" onclick="changeColor(this)">  
          开始
            </div>  
        </body>  
        <script>  
        //这个事件的目的是:当我们点击时要怎么处理  
            function changeColor(obj)  
            {  
                //因为JS会把HTML标签当做一个对象  
                //对象.属性 = 值;  
                obj.style.background = 'pink';  
            }  
        </script>  
    </html>  

本专题记录平时项目中一些最基础简单的实现代码和容易忽略的细节,仅仅是为了记录,对于自己来说,基础是最重要的,一个项目就是由无数的基础组成。

原文作者:祈澈姑娘 技术博客:https://www.jianshu.com/u/05f416aefbe1 90后前端妹子,爱编程,爱运营,爱折腾。 坚持总结工作中遇到的技术问题,坚持记录工作中所所思所见,欢迎大家一起探讨交流。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • ajax实现简单的点击左侧菜单,右侧加载不同网页

    王小婷
  • 从零开始学习React-属性绑定(三)

    前面两节用的是HBuilder编辑器,很多童鞋说Visual Studio Code很好用,确实如此,因为平时开发用习惯了前者,写教程的时候,为了方便大家体验,...

    王小婷
  • CSS写一个缺角的div

    今天用CSS写一个缺角的div,大致的效果是这样的,div的左上角和右上角缺掉了一块的效果,简称为缺角div

    王小婷
  • css中清除浮动方式五

    用户7873631
  • 网页结构与表现原则

    网页的结构与表现原则总的来说为: 先按结构和语义编写代码 然后进行CSS样式设置 减少HTML与CSS契合度(精简页面结构) 我们可以通过一个微博用户发言信息列...

    就只是小茗
  • 前端基础-CSS基础(八)

    efonfighting
  • 详解:42 background-position 记住,是左右上下的顺序的哈

    用户7873631
  • HTML_样式

    bye
  • 18.CSS

    选择器 1.标签上直接设置style属性 <p style="color: red">直接标签里面写</p> 2.id选择器 <style> ...

    zhang_derek
  • Selenium2+python自动化26-js处理内嵌div滚动条

    前言 前面有篇专门用js解决了浏览器滚动条的问题,生活总是多姿多彩,有的滚动条就在页面上,这时候又得仰仗js大哥来解决啦。 一、内嵌滚动条 1....

    上海-悠悠

扫码关注云+社区

领取腾讯云代金券