<h3>我的第一个Javascript</h3>
<p id="demo1">1.点击按钮,改变内容!</p>
<!-- 设置id,方便查找 --> <button type="button" onclick="myFunction()">按钮</button>
<!-- 当鼠标点击按钮时,执行myFunction()里的代码 --> <script type="text/javascript">
function myFunction(){//myFunction(),函数名
x=document.getElementById('demo1');//查找id='demo1'的元素
x.innerHTML='我是被改变后的内容!';//改变内容
}
</script>
<p>2.点击按钮或图片,改变图片!</p>
<img id="demo2" width="100px" height="100px" onclick="myFunction2()" src="img/black.png">
<br/>
<button type="button" onclick="myFunction2()">按钮</button> <script type="text/javascript">
function myFunction2(){
y=document.getElementById('demo2')
if (y.src.match('black')){
/* y.src.match('black'):查找id='demo2'的元素里的src地址
有没有包含black字符串,有就执行if,没有就执行else*/
y.src='img/green.png';
/* 替换img标签里src的值 */
}
else{
y.src='img/black.png';
/* 替换img标签里src的值 */
}
}
</script>
<p id="demo3" onclick="myFunction3()" style="color: black;">3.点击文字或按钮,改变文字颜色!</p>
<button type="button" onclick="myFunction3()">按钮</button> <script type="text/javascript">
function myFunction3(){
z=document.getElementById('demo3')
if(z.style.color.match('black')){
/* 判断id='demo3'的标签里,属性值是否有black字符串,
有执行if,没有执行else */
z.style.color='red';
}else{
z.style.color='black';
}
}
</script>

好像没什么说的,都在注释里了,JavaScript 能够改变任意 HTML 元素的大多数属性;

JavaScript001,鼠标点击改变文字或图片的更多相关文章

  1. 鼠标点击输入框文字消失 value placeholder 以及JQ实现效果 (仿京东的输入框效果)

    鼠标点击输入框文字消失 value实现方法  placeholder实现方法     以及JQ实现placeholder效果 <input type="text" value ...

  2. vue列表渲染,以及鼠标点击改变样式的问题

    在实际项目中,我们进场会遇到鼠标点击该表某个DOM元素的样式,在原生的js或者jquery中,我们会比较熟练的实现这个需求,但是在vue中怎么实现呢? 直接操作DOM?NO!NO! 既然我们的项目使用 ...

  3. 鼠标点击自定义文字展现特效JS代码

    JS特效使用方法 只需将如下JS代码放到</body>之前就好了 var a_idx = 0; jQuery(document).ready(function($) { $("b ...

  4. 鼠标点击按钮控制图片移动或者键盘控制图片移动(解决问题:parseInt失效问题,用Number)

    在测试用鼠标点击按钮,使图片左右上下移动: 效果如下: 代码如下: <!DOCTYPE html> <html lang="en"> <head> ...

  5. iOS·UIButton如何文字在下图片在上

    创建子类继承自UIButton,在layoutSubviews方法中改变文字和图片的位置就可以了,同理,稍作改变,可以写出文字在上图片在下.本文只给出文字在下图片在上的代码 -(void)layout ...

  6. 基于jQuery CSS3鼠标点击动画效果

    分享基于jQuery CSS3鼠标点击动画效果支持图片或内容滑动,允许设置动画延迟效果.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="co ...

  7. CSS鼠标点击式变化图片透明度

    今天分享前端代码主题:jequery控制css图片透明度 很多时候在网站图片处理上需要实现一些辅助效果,比如鼠标在图片上滑动时或点击时改变图片颜色(变灰或者其他),其实一个简单的办法就是改变图片css ...

  8. 函数传参,改变Div任意属性的值&&图片列表:鼠标移入/移出改变图片透明度

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. 一款基于jquery的下拉点击改变背景图片

    今天给大家介绍一款基于jquery的下拉点击改变背景图片.单击右上角的图片,下拉显示可选择的背景图片,单击图片变为背景图.效果图下: 在线预览   源码下载 实现的代码. html代码: <a ...

随机推荐

  1. vue告警信息:{ parser: "babylon" } is deprecated.

    告警信息: 13% building modules 28/40 modules 12 active ...dex=0!\src\App.vue{ parser: "babylon" ...

  2. [LuoguP1155]双栈排序_二分图_bfs

    双栈排序 题目链接:https://www.luogu.org/problem/P1155 数据范围:略. 题解: 神仙题. 就第一步就够劝退了. 这个二分图非常不容易,首先只有两个栈,不是属于一个就 ...

  3. MapReduce的shuffle过程详解

    [学习笔记] 结果分析:shuffle的英文是洗牌,混洗的意思,洗牌就是越乱越好的意思.当在集群的情况下是这样的,假如有三个map节点和三个reduce节点,一号reduce节点的数据会来自于三个ma ...

  4. 快速创建一个SpringBoot项目并整合Mybatis

    2019-09-15 一.Maven环境搭建 1.导入jar坐标 <project xmlns="http://maven.apache.org/POM/4.0.0" xml ...

  5. Python 安装包时选择 python版本

    安装了两个版本的python 其中一个版本为2.7 专门为python 2.7安装包使用的语句为 升级pip E:\Python27\python -m pip install --upgrade p ...

  6. java之集合那些事

    集合概述: 集合和数组都可以保存多个对象,但是数组的长度不可变,集合可以保存数量变化的数据.java中的集合类主要由两个接口派生出,Collection和Map Collection接口和Iterat ...

  7. Ubuntu部署ftp服务器

    Ubuntu 16.04 FTP服务器安装及配置     FTP File Transfer Protocol文件传输协议,两台计算机传送文件的协议,客户端可以通过FTP命令从服务器下载,上传文件,修 ...

  8. 使用vue-cli创建vue工程

    在Windows环境下,打开命令行窗口,跳转至想创建工程的路径. 如:D:\MyWork\22_Github\rexel-cn\rexel-jarvis 创建vue工程,命令:vue create r ...

  9. (五)Activiti之获取流程定义图片和流程定义删除

    一.获取流程定义图片 /** * 通过流程部署ID获取流程图图片 */ @Test public void getImageById()throws Exception{ InputStream in ...

  10. 通俗化理解Spring3 IoC的原理和主要组件

      ♣什么是IoC? ♣通俗化理解IoC原理 ♣IoC好处 ♣工厂模式 ♣IoC的主要组件 ♣IoC的应用实例 ♣附:实例代码 1.什么是IoC(控制反转)? Spring3框架的核心是实现控制反转( ...