<!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. Linux常用图片查看处理软件

    1.Shotwell是一款轻量级的图片管理软件,GNOME桌面环境默认自带,您可以使用它来从数码相机中导入相片.shotwell允许用户对图片进行管理,并且提供了一些基本的编辑功能,您可以对图片进行剪 ...

  2. caioj 1066 动态规划入门（一维一边推4：护卫队）（分组型dp总结）

    很容易想到f[i]为前i项的最优价值,但是我一直在纠结如果重量满了该怎么办. 正解有点枚举的味道. 就是枚举当前这辆车与这辆车以前的组合一组,在能组的里面取最优的. 然后要记得初始化,因为有min,所 ...

  3. Mysql学习总结（3）——MySql语句大全：创建、授权、查询、修改等

    一.用户创建.权限.删除 1.连接MySql操作 连接:mysql -h 主机地址 -u 用户名 -p 用户密码 (注:u与root可以不用加空格,其它也一样) 断开:exit (回车) 打开cmd, ...

  4. Android底层驱动开发（一）

    1   Android为什么要增加硬件抽象层HAL A    统一硬件调用接口.所以利用HAL屏蔽linux驱动的复杂不统一的接口 B   解决GPL版权问题,因为linux内核基于GPL协议.这个G ...

  5. intellij—idea14 注冊机

    package com.qunar.fresh; import java.math.BigInteger; import java.util.Date; import java.util.Random ...

  6. 基于Linux平台的Openvas配置使用视频教学

    常见的漏洞扫描工具有Openvas.LSAT.Nessus.X-scan.ShadowSecurityScanner和流光等,openvas是一款最全面的开源漏洞扫描工具,由于openvas安装比较困 ...

  7. 关于html(meta的常用的用法)

    http://www.haorooms.com/post/html_meta_ds

  8. Spring_Learn

    IOC  控制反转,或者依赖注入  控制权的转移,应用程序本身不负责依赖对象的创建和维护.而是由外部容器负责创建和维护. DI(依赖注入)是其实现的一种方式 创建对象并且组装对象之间的关系. 1Spr ...

  9. nodejs学习（三）--express连接mysql数据库，mysql查询封装

    一.说一下 连接不同的数据库需要安装相应的插件,此demo使用mysql数据库,需自行安装mysql数据库软件. 新建数据库webapp, 新建表users: 二.直接开码 npm install m ...

  10. 【习题 8-8 UVA - 1612】Guess

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] double千万不要用==判断相等... 而且两个保留2位有效数字的数字x,y 判断它们相等应该这样. int temp1 = ro ...