JavaScript basic code

最新推荐文章于 2021-08-15 22:51:14 发布

原创最新推荐文章于 2021-08-15 22:51:14 发布 · 386 阅读

0 ·

CC 4.0 BY-SA版权

Javascript 专栏收录该内容

4 篇文章

订阅专栏

本文通过几个实例展示了如何使用JavaScript来改变HTML元素的内容、样式及显示状态，并提供了简单的动画效果实现方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<button onclick="document.getElementById('myImage').src='pic_bulbon.gif'">Turn on the light</button>
<img id="myImage" src="pic_bulboff.gif" style="width:200px">

<button onclick="document.getElementById('myImage').src='pic_bulboff.gif'">Turn off the light</button>

//Js change element css
<p id="demo">JavaScript can change the style of an HTML element.</p>
<button type="button" onclick="document.getElementById('demo').style.fontSize='35px'">Click Me!</button>

//Js change element css<p id="demo">JavaScript can change the style of an HTML element.</p><button type="button" onclick="document.getElementById('demo').style.fontSize='35px'">Click Me!</button>

//hide element
<p id="demo">JavaScript can hide HTML elements.</p>
<button type="button" onclick="document.getElementById('demo').style.display='none'">Click Me!</button>

//show element
<p id="demo" style="display:none">Hello JavaScript!</p>
<button type="button" onclick="document.getElementById('demo').style.display='block'">Click Me!</button>

//css and html
<!Doctype html>
<html>
<style>
#container {
  width: 400px;
  height: 400px;
  position: relative;
  background: green;
  
}
#animate {
  width: 50px;
  height: 50px;
  position: absolute;
  background: red;
  margin-top:20px;
}
</style>
<body>

<h2>My First JavaScript Animation</h2>

<div id="container">    // id is the same with css class name
<div id="animate"></div>
</div>

</body>
</html>