前端切图|点击按钮div变色
<!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变色的更多相关文章
- 前端切图相关ps技术
标签(空格分隔): 前端切图 复制图层到一个新的ps文件 对于单个图层 1.选中图层 2.CTRL+A全选 3.CTRL+C 4.CTRL+N新建文件,文件大小默认就可以(背景透明也在这个面板设置), ...
- 前端切图神器-cutterman
之前我写过一篇关于前端切图的博客:https://www.cnblogs.com/tu-0718/p/9741058.html 但上面的方法在切图量大时依然很费时间,下面向大家推荐这款免费切图神器 c ...
- 前端切图实战（PSD设计稿转化为前端）
课程来源:https://www.imooc.com/learn/668 一:读设计稿 划分:头部.尾部.公共部分.大概分多少块.logo的重用.列表有哪些.各部分用什么技术实现等等. 二:建立项目目 ...
- 原生JS实现点击一个按钮显示一个div，再点击按钮div隐藏，或点击除div外其它空白处div隐藏
<!DOCTYPE html> <html style="font-size: 24px"> <head> <title>js点击按 ...
- 【前端切图】用css画一个卡通形象-小猪佩奇
最近在腾讯云技术社区遇到了一位奇才,用css画出了一个社会人小猪佩奇,不得不服.研究了一下他的文章https://segmentfault.com/a/1190000014909658,感觉甚是有趣, ...
- Web前端 页面功能——点击按钮返回顶部的实现方法
1. 最简单的静态返回顶部,点击直接跳转页面顶部,常见于固定放置在页面底部返回顶部功能 方法一:用命名锚点击返回到顶部预设的id为top的元素 html代码 <a href="#top ...
- 前端切图要选择png和jpg呢？
今天特意验证了一下: 切完图分别保存png24.png8和jpg60.jpg80(60和80表示保存图片时品质选择)后, 然后再压缩图片,压缩图片地址:https://tinypng.com/ 图片直 ...
- 前端切图:CSS实现隐藏滚动条同时又可以滚动
CSS 实现隐藏滚动条同时又可以滚动 原始功能: 图片发自简书App 添加伪类之后的功能: 图片发自简书App 完整demo如下: <!DOCTYPE html> <html> ...
- 前端切图:调用百度地图API
原型图 图片发自简书App <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...
随机推荐
- git pull 、git fetch、 git clone
git clone 代表从远程克隆过来包括所有的版本信息 git fetch是从远程获取最新的版本 git pull相当于 git fetch 然后再git merge
- javaScript call与apply学习笔记
call和apply是借用他人的函数实现自己到功能,具体表现在改变this指向,借用他人方法 而不同的地方是call是把实参按照形参的个数传入,而apply传入的是一个数组(argument) 写一个 ...
- Hexo 添加自定义的内置标签
灵感 想设计一个记录自已骑行的页面,显示时间.地点.路线图等信息.方便以后做一些留念.定位想实现下面类似的效果.参考:<特效> 实现方案也比较简单,反键查看源码.直接Copy,在 ...
- mysql 查看单个表每个索引的大小
/*单个表每个索引的大小*/ SELECT sum(stat_value) pages, table_name part, index_name, concat(,),'M',' rows') * @ ...
- 使用LVS 实现负载均衡的原理。
LVS 负载均衡 负载均衡集群是 Load Balance 集群.是一种将网络上的访问流量分布于各个节点,以降低服务器压力,更好的向客户端提供服务的一种方式.常用 的负载均衡. 开源软件有Nginx. ...
- swift菜鸟入门视频教程-12-21讲
前段时间录制的swift教程.一直懒就没有发出来,有些教程是在xcode beta2的时候录制的,所以可能如今不太适合了,可是还是会有点帮助,懒了不想写太多的东西了,基本上就是依照官方文档上面的章节做 ...
- [Android]新建项目继承Activity不继承ActionBarActivity
在SDK更新后,在eclipse新建Android项目时.我们常常会碰到这样一种事情:新建的MainActivity不再继承Activity而是继承ActionBarActivity,因为一些人的开发 ...
- jquery源码01---(2880 , 3042) Callbacks : 回调对象 : 对函数的统一管理
// optionsCache : { 'once memory' : { once : true , memory : true } } var optionsCache = {}; // once ...
- 浏览器加载跟渲染html的顺序-css渲染效率的探究
1.浏览器加载和渲染html的顺序1.IE下载的顺序是从上到下,渲染的顺序也是从上到下,下载和渲染是同时进行的.2.在渲染到页面的某一部分时,其上面的所有部分都已经下载完成(并不是说所有相关联的元素都 ...
- javap 命令 反编译代码
javap 命令 javap -c classname 一个好的分析class二进制文件的 链接 http://blog.csdn.net/pwlazy/article/details/7954169