<!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. tensorflow学习之路---Session、Variable（变量）和placeholder

    ---恢复内容开始--- 1.Session '''Session.run():首先里面的参数是一个API(函数的接口)的返回值或者是指定参数的值:功能:得知运算结果有两种访问方式:直接建立或者运用w ...

  2. Maven学习总结（20）——Maven pom.xml配置再体会

    Maven的pom.xml配置文件详解 <!--父项目的坐标.如果项目中没有规定某个元素的值,那么父项目中的对应值即为项目的默认值. 坐标包括group ID,artifact ID和 vers ...

  3. 用css画三角形

    当我们给某个图片做一个弹出层的时候,假设要让我们的弹出层显示一个小箭头,能够用css来画 用div来演示 div{ border:12px solid; berder-color:transparen ...

  4. 52. nodejs报错：Cannot find module 'ejs'

    转自:https://blog.csdn.net/u010142437/article/details/79012605 错误显示: Error: Cannot find module 'ejs'  ...

  5. 谈谈iframe的优缺点

    iframe是一种框架,也是一种很常见的网页嵌入方式,零度今天给大家分析分析它的优缺点. iframe的优点: 1.iframe能够原封不动的把嵌入的网页展现出来. 2.如果有多个网页引用iframe ...

  6. 量化派基于Hadoop、Spark、Storm的大数据风控架构--转

    原文地址:http://www.csdn.net/article/2015-10-06/2825849 量化派是一家金融大数据公司,为金融机构提供数据服务和技术支持,也通过旗下产品“信用钱包”帮助个人 ...

  7. 004 python 流程控制语句

    流程控制语句 1.if判断 语法 a = 10,b = 20# 1if a == 10:  print('a等于10')# 2if a > b:  print('a大于b')else:  pri ...

  8. 用内置的库turtle来画一朵花，python3

    题目:用内置的库turtle来画一朵花 看了群主最后成像的图片,应该是循环了36次画方框,每次有10度的偏移. 当然不能提前看答案,自己试着写代码. 之前有用过海龟画图来画过五角星.奥运五环.围棋盘等 ...

  9. 【直接拿来用のandroid公共代码模块解析与分享】の Notification和NotificationManager

    本文源代码托管在https://github.com/ASCE1885/asce-common,欢迎fork Android项目做得多了.会发现原来非常多基础的东西都是能够复用,这个系列介绍一些自己项 ...

  10. C# wpf程序获取当前程序版本

    C# wpf程序获取当前程序版本 /// <summary>         /// 获取当前系统的版本         /// </summary>         /// ...