<!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后前端妹子，爱编程，爱运营，爱折腾。
坚持总结工作中遇到的技术问题，坚持记录工作中所所思所见，欢迎大家一起探讨交流。

关注「编程微刊」公众号 ，在微信后台回复「领取资源」，获取IT资源300G干货大全。

公众号回复“1”，拉你进程序员技术讨论群.

前端切图|点击按钮div变色的更多相关文章

  1. 前端切图相关ps技术

    标签(空格分隔): 前端切图 复制图层到一个新的ps文件 对于单个图层 1.选中图层 2.CTRL+A全选 3.CTRL+C 4.CTRL+N新建文件,文件大小默认就可以(背景透明也在这个面板设置), ...

  2. 前端切图神器-cutterman

    之前我写过一篇关于前端切图的博客:https://www.cnblogs.com/tu-0718/p/9741058.html 但上面的方法在切图量大时依然很费时间,下面向大家推荐这款免费切图神器 c ...

  3. 前端切图实战（PSD设计稿转化为前端）

    课程来源:https://www.imooc.com/learn/668 一:读设计稿 划分:头部.尾部.公共部分.大概分多少块.logo的重用.列表有哪些.各部分用什么技术实现等等. 二:建立项目目 ...

  4. 原生JS实现点击一个按钮显示一个div，再点击按钮div隐藏，或点击除div外其它空白处div隐藏

    <!DOCTYPE html> <html style="font-size: 24px"> <head> <title>js点击按 ...

  5. 【前端切图】用css画一个卡通形象-小猪佩奇

    最近在腾讯云技术社区遇到了一位奇才,用css画出了一个社会人小猪佩奇,不得不服.研究了一下他的文章https://segmentfault.com/a/1190000014909658,感觉甚是有趣, ...

  6. Web前端 页面功能——点击按钮返回顶部的实现方法

    1. 最简单的静态返回顶部,点击直接跳转页面顶部,常见于固定放置在页面底部返回顶部功能 方法一:用命名锚点击返回到顶部预设的id为top的元素 html代码 <a href="#top ...

  7. 前端切图要选择png和jpg呢？

    今天特意验证了一下: 切完图分别保存png24.png8和jpg60.jpg80(60和80表示保存图片时品质选择)后, 然后再压缩图片,压缩图片地址:https://tinypng.com/ 图片直 ...

  8. 前端切图:CSS实现隐藏滚动条同时又可以滚动

    CSS 实现隐藏滚动条同时又可以滚动 原始功能: 图片发自简书App 添加伪类之后的功能: 图片发自简书App 完整demo如下: <!DOCTYPE html> <html> ...

  9. 前端切图:调用百度地图API

    原型图 图片发自简书App <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...

随机推荐

  1. SQL语句查询数据库所有表和所有字段的详细信息（包括表描述和字段描述）

    select (case then ddd.value else '' end ) as "表名(中文)" --如果表名相同就返回空 , (case then d.name els ...

  2. POJ 3641 Pseudoprime numbers (miller-rabin 素数判定)

    模板题,直接用 /********************* Template ************************/ #include <set> #include < ...

  3. 【Henu ACM Round#18 A】 Multiplication Table

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 遍历i从1..n 看看x%i==0以及x/i<=n是否成立. [代码] #include <iostream> u ...

  4. ORA-00922: 选项缺失或无效

    1.错误描写叙述 SQL> create table info_stu from select t.stu_id,t.stu_name,t.stu_age from info t; create ...

  5. 75.《nodejs开发指南》express4.x版-微博案例完整实现

    转自:https://blog.csdn.net/cgwcgw_/article/details/39317587 完整代码下载 https://github.com/haishangfeie/wei ...

  6. 通过PXE安装Linux实况

    通过PXE安装Linux实况 网卡引导操作系统的过程我们可以把它称为PXE(Pre-bootExecutionEnvironment),十几年前,在搞无盘NT时候,我们为了使网卡支持PXE引导要特意购 ...

  7. windows下go语言环境

    1  liteIDE ,随便装哪儿都行 2  GO语言包 安装  ,我安装到了 c:\go  (顺便给个地址下载地址  https://golang.org/dl/  ) 3  GCC编译器 安装,同 ...

  8. SQL 锁 lock

    http://www.cnblogs.com/huangxincheng/p/4292320.html 关于sql 中的锁. 1 排他锁 sql中在做 insert update delete 会存在 ...

  9. 用Ngen指令加快C#程序的启动速度

    用Ngen指令加快C#程序的启动速度 由于C#是使用实时 (JIT) 编译器编译原始程序集.因此第一次运行C#程序(或Dll)时,程序的启动非常慢.为了提高用户的体验,可以用Microsoft的供的本 ...

  10. 如何在win10上同时安装python2和python3

    哎,其实本人已经用惯了python2,听说python3的语法有很多不一样的地方,那我之前写的算法改起来岂不是日了狗了吗?所以一直没改用python3.但是谷歌的那个TensorFlow,在windo ...