如何用JavaScript代码控制HTML页面元素

来源：互联网 2023-03-16 23:56:32 166

通过一个简短的实例说明如何用JavaScript代码控制HTML页面元素，当单击ID为"tsj"的元素时可控制音乐播放/暂停，同时更改元素"tsj"本身的图片及提示文本。

工具/原料

准备好音乐及图片文件。

编写代码：

!DOCTYPE html>

html>

head>

meta charset="utf-8">

link rel="shortcut icon" href="favicon.ico">

title>如何用JavaScript代码控制HTML页面元素/title>

style>

body { background:url("bg.jpg"); font-family:'Segoe UI', Helvetica, Arial, sans-serif; text-align:center; }

#tsj { background:url("tsjoff.gif"); width:150px; height:150px; margin:0 auto; }

/style>

/head>

body>

audio id="music" autoplay loosource src="music.mp3" type="audio/mpeg">/audio>

div id="tsj" title="暂停音乐" onclick="playPause()">/div>

script>

function playPause()

{

var music = document.getElementById("music");

var tsj = document.getElementById("tsj");

if(music.paused) { music.play(); tsj.style.background="url('tsjoff.gif')"; tsj.title="暂停音乐"; }

else { music.pause(); tsj.style.background="url('tsjon.gif')"; tsj.title="播放音乐"; }

}

/script>

/body>

/html>

如何用JavaScript代码控制HTML页面元素

2本页面未经授权抓取自百度经验

用浏览器打开观察，单击此元素实现了播放/暂停音乐，同时改变了元素的图片及提示文本。

如何用JavaScript代码控制HTML页面元素

以上方法由办公区教程网编辑摘抄自百度经验可供大家参考！