w3school_js简介_day_01

最新推荐文章于 2021-04-12 16:02:42 发布

水兵没月

最新推荐文章于 2021-04-12 16:02:42 发布

阅读量184

点赞数

分类专栏：前端文章标签： js

本文链接：https://blog.csdn.net/weixin_43124425/article/details/105774433

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文参考https://www.w3school.com.cn/js/js_htmldom_document.asp进行学习

1.js可以改变HTML的内容

<!DOCTYPE html>
<html>
<body>
<h1>第一天学习JavaScript</h1>
<h2><p id="demo">第一天学习什么_id</p></h2>
<button type="button" onclick="document.getElementById('demo').innerHTML = '学习 getElementById'">单击</button>
</body>
</html>

2.js可以改变 HTML 属性

<!DOCTYPE html>
<html>
<body>
<h1>第一天学习JavaScript</h1>
<button onclick="document.getElementById('myImage').src='https://www.w3school.com.cn/i/eg_bulbon.gif'">开灯</button>

<img id="myImage" border="0" src="https://www.w3school.com.cn/i/eg_bulbon.gif" style="text-align:center;">

<button onclick="document.getElementById('myImage').src='https://www.w3school.com.cn/i/eg_bulboff.gif'">关灯</button>
</body>
</html>

3.js能够改变 HTML 样式 (CSS)隐藏/显示 HTML 元素

<!DOCTYPE html>
<html>
<body>
<h1>第一天学习JavaScript</h1>
<h2><p id="demo">第一天学习什么_id</p></h2>
<p id="demo1">第一天学习什么？</p>
<button type="button" onclick="document.getElementById('demo').style.fontSize = '30px'">单击demo</button>
<button type="button" onclick="document.getElementById('demo1').style.display='none'">单击demo隐藏 </button>
<button type="button" onclick="document.getElementById('demo1').style.display='block'">单击demo显示 </button>
</body>
</html>

水兵没月

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
w3school_js简介_day_01

本文参考https://www.w3school.com.cn/js/js_htmldom_document.asp进行学习1.js可以改变HTML的内容<!DOCTYPE html><html><body><h1>第一天学习JavaScript</h1><h2><p id="demo">第一天学...
复制链接

扫一扫