JavaScript小笔记开启

嘿嘿，今天我开始学JavaScript啦！这里记录了我学到的一些JavaScript的小知识和示例哦。

JavaScript和HTML手拉手

你知道吗？JavaScript可以帮我们修改网页上的内容哦！有一个很好用的方法叫做getElementById()。

看，像下面这样，就可以找到id是"specialDemo"的HTML小伙伴（注意这里id的值已经改变了），然后跟它说：“嘿，变成’Greetings from JavaScript’吧！”（这里的内容也变了哦）：

document.getElementById("specialDemo").innerHTML = "Greetings from JavaScript";

哦对了，用单引号也可以哦，这次我们换个属性，比如title，并且设置一个新的值：

document.getElementById('specialDemo').title = 'This is a tooltip from JavaScript';

JavaScript还能改HTML的属性呢

除了可以改内容，JavaScript还能改HTML小伙伴的属性值哦！比如，可以换个图片的src，就能展示不同的图片啦！这次我们用一个新的图片路径：

document.getElementById('dynamicImage').src = 'shiny_new_picture.jpg';

JavaScript和CSS也玩得很开心

JavaScript还能帮我们动态地改HTML小伙伴的样式呢！

这次，我们改变一个不同的CSS属性，比如背景色，并且选择一个新的id “styledDemo”：

document.getElementById("styledDemo").style.backgroundColor = "lightblue";

JavaScript的隐藏和寻宝游戏

JavaScript还能帮我们隐藏和显示HTML小伙伴呢！就像玩寻宝游戏一样。

这次我们换个id "secretBox"来隐藏和显示：

隐藏小伙伴就这样：

document.getElementById("secretBox").style.display = "none";

想找到它了就让它显示出来，并且改变它的边框样式：

document.getElementById("secretBox").style.display = "block";
document.getElementById("secretBox").style.border = "2px solid green";

我还知道一些小秘密哦

• JavaScript的小秘密可不止这些呢！
• 学习JavaScript的过程中，你会发现更多有趣的功能和用法。
• 不断尝试和探索，你会越来越擅长使用JavaScript来创造美妙的网页效果！

希望我的小笔记能帮到你学JavaScript哦！如果有什么问题，随时来找我吧~