<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 元素的大多数属性;