<!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. cf 822B Crossword solving

    B. Crossword solving time limit per test 1 second memory limit per test 256 megabytes input standard ...

  2. Atcoder Grand Contest 107 A Biscuits

    A - Biscuits Time limit : 2sec / Memory limit : 256MB Score : 200 points Problem Statement There are ...

  3. CSDN博客给我带来的一些诱惑和选择机会(二):HR“邀请于我”,猎头“有求于我”

    上次,2013年10月8日 ,分享了一篇颇具"正能量"的文章CSDN博客给我带来的一些诱惑和选择机会,获得了很好的正面效果. 10月份,又发生了很多有趣.有意义的事情. 其中,有一 ...

  4. ssm框架的多表查询和增删查改

    必须声明本文章==>http://www.cnblogs.com/zhu520/p/7883273.html 一: 1):我的运行环境 我使用myeclipse(你也可以使用eclipse),t ...

  5. [ Javascript ] JavaScript中的定时器(Timer) 是怎样工作的!

    作为入门者来说.了解JavaScript中timer的工作方式是非常重要的.通常它们的表现行为并非那么地直观,而这是由于它们都处在一个单一线程中.让我们先来看一看三个用来创建以及操作timer的函数. ...

  6. SQL 增删改查（具体）

    一.增:有3种方法 1.使用insert插入单行数据: insert [into] <表名> [列名] values <列值> insert into Strdents (na ...

  7. startActivity-两种start 方式

    对于activity的启动有两种方式 1.startActivity-这种方式比较简单,我们就不做讲解了 2.startActivityForResult-这种启动方式可以实现父子activity双向 ...

  8. Docs-->.NET-->API reference-->System.​Web.​UI.​Web​Controls-->Repeater

    https://docs.microsoft.com/en-us/dotnet/api/system.web.ui.webcontrols.repeater?view=netframework-4.7 ...

  9. WinRAR 5.21 去弹窗 疑惑

    WinRAR 突然就有弹窗广告了 ,找了个方法,重新写一下安装目录下的 rarreg.key,确实有效果但是重写的和之前的完全一样啊,至少在文本中完全一样,怎么回事. 下面附上两个文件, 1.key ...

  10. Logistic Regression and Newton's Method

    Data For this exercise, suppose that a high school has a dataset representing 40 students who were a ...