javascript: what can javascript do?
2024-09-05 05:12:00
1、Javascript can change html content
<!DOCTYPE html>
<html>
<body> <h2>What Can JavaScript Do?</h2> <p id="demo">JavaScript can change HTML content.</p> <button type="button" onclick='document.getElementById("demo").innerHTML = "Hello JavaScript!"'>Click Me!</button> </body>
</html>
2、Javascript can change html attributes
<!DOCTYPE html>
<html>
<body> <h2>What Can JavaScript Do?</h2> <p>JavaScript can change HTML attribute values.</p> <p>In this case JavaScript changes the value of the src (source) attribute of an image.</p> <button onclick="document.getElementById('myImage').src='pic_bulbon.gif'">Turn on the light</button> <img id="myImage" src="pic_bulboff.gif" style="width:100px"> <button onclick="document.getElementById('myImage').src='pic_bulboff.gif'">Turn off the light</button> </body>
</html>
3、Javascript can change CSS style
<!DOCTYPE html>
<html>
<body> <h2>What Can JavaScript Do?</h2> <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 change Size!</button> <button type="button" onclick="document.getElementById('demo').style.backgroundColor='yellow'">Click Me change color!</button> </body>
</html>
4、Javascript can change hide show html
<!DOCTYPE html>
<html>
<body> <h2>What Can JavaScript Do?</h2> <p>JavaScript can show hidden HTML elements.</p> <p id="demo" style="display:none">Hello JavaScript!</p>
<p id="demo1" style="display:block">Hello JavaScript 001!</p> <button type="button" onclick="document.getElementById('demo').style.display='block'">Click Me to show!</button> <button type="button" onclick="document.getElementById('demo1').style.display='none'">Click Me to hide!</button> </body>
</html>
最新文章
- jquery使用注意点以及建议
- iOS开发ARC内存管理技术要点
- css用背景图来替换文字来达到隐藏文字的目的
- Auty自动化测试框架第六篇——垃圾代码回收、添加suite支持
- Asp.net Core WebApi 支持json/xml格式的数据返回
- [Asp.net mvc] 在Asp.net mvc 中使用MiniProfiler
- document.write() 和 document.writeln() 区别
- chrmoe debug
- 《APUE》读书笔记第十三章-守护进程
- dBm与Vpp相互转换公式
- cocos2d-x学习之路之工作吐槽
- DOM对象与jquery对象相互转换
- Http User Agent Example
- awk技巧【转】
- 每天进步一点点out1
- 未能找到类型或命名空间名List
- （原创）C++11改进我们的程序之简化我们的程序（四）
- 现象级AR营销助力“口碑双十二”，蚂蚁特工在全国数万商户掀起“AR捉四宝”
- AngularJs学习笔记--Understanding the Model Component
- 2. 创建一个简单的Maven项目