你有没有在网页上见过这种操作？点击一个按钮，原本小小的文字“唰”地变大了；或者滑动鼠标，标题字号跟着变化。这些效果的背后，其实都离不开JavaScript（简称JS）对网页元素的控制。今天我们就从最基础的一行代码入手，看看怎么用JS修改网页里的文字大小。
先搞懂这行代码的“身份”
我们今天要研究的代码是：
document.getElementById("demo").style.fontSize = "35px";
别被它吓到，拆成几个部分慢慢看，其实像拼积木一样简单。
第一步：找到目标——document.getElementById("demo")
想象一下，你走进一个大仓库（这个仓库就是网页的“后台”），里面堆满了各种盒子（每个盒子对应网页里的一个元素，比如标题、段落、按钮）。现在你需要找到其中一个特定的盒子，怎么找？
这时候仓库管理员会问你：“你有这个盒子的‘身份证’吗？”这个“身份证”在网页里叫id（全称“标识符”），每个盒子的id都是唯一的，就像你的身份证号不会和别人重复。
getElementById("demo")的意思就是：“管理员，帮我找一下id等于demo的那个盒子！”这里的"demo"是你给目标元素提前起的名字（比如一个段落标签可能写成<p id="demo">这是一段文字</p>）。
总结：这一步是在说“我要操作的是那个叫demo的元素”。
第二步：打开“外观控制面板”——.style
找到盒子之后，你想改变它的样子（比如颜色、大小、位置），这时候需要打开它的“外观控制面板”。在JS里，这个面板就叫.style（直译是“样式”）。
比如，你想让盒子变红，就操作.style.color；想改背景色，就用.style.backgroundColor。今天我们要改的是文字大小，对应的就是.style.fontSize（注意这里用了驼峰命名法，把“font-size”连起来写成了“fontSize”）。
总结：.style是用来控制元素外观的“工具包”，fontSize是其中专门调文字大小的“工具”。
第三步：设置具体数值——“= "35px"”
找到工具包，拿出工具，最后要告诉工具“具体要调多少”。这里的"35px"就是最终指令：把文字大小设置为35像素（px是网页里最常用的长度单位，类似“厘米”但更适合屏幕显示，1px大约是屏幕上的一个小格子）。
注意：数值后面一定要带单位！就像你买奶茶不能只说“要500”，得说“500毫升”；这里如果漏掉px，代码就会报错，浏览器根本听不懂你要做什么。
动手试一下：从代码到效果
光说不练假把式，我们来实际操作一遍，看看效果。
第一步：写一个HTML元素（目标盒子）
先在HTML文件里放一个段落，给它加上id="demo"，方便JS找到它：
<p id="demo">这是一段初始大小的文字，等下我要变大啦！</p>
第二步：用JS修改字体大小
在HTML里添加一个按钮，点击按钮时触发JS代码（可以用onclick事件绑定）：
<button onclick="changeFontSize()">点我变大字</button>
<script>
function changeFontSize() {
document.getElementById("demo").style.fontSize = "35px";
}
</script>
效果预览
保存并打开这个HTML文件，你会发现：
- 初始时文字是默认大小（通常16px左右）；
- 点击按钮后，“这是一段初始大小的文字……”会立刻变成35px的大字！
常见问题小答疑
Q：如果
id写错了（比如写成dmeo），代码还能运行吗？
A：不能。浏览器会找不到对应的元素，相当于你给了管理员一张错误的身份证号，他自然找不到你要的盒子。Q：除了
px，还能用其他单位吗？
A：可以！比如em（相对于父元素的大小）、rem（相对于网页根元素的大小）、%（百分比）。但对新手来说，px最直观，不容易出错，建议先从它开始。Q：能不能直接在HTML里改字体大小？
A：当然可以！比如用CSS的style属性：<p style="font-size: 35px;">。但JS的优势在于“动态”——可以根据用户的操作（点击、滑动等）随时修改，而HTML/CSS的设置是一次性的。
总结
这行看似复杂的代码，拆开来其实就是“找对人→开对工具包→下对指令”。理解了每一步的逻辑，以后修改文字颜色、调整元素位置，甚至做更复杂的交互效果，都是类似的思路。
下次看到网页上的动态效果，不妨想一想：“这里是不是用了getElementById找到某个元素，然后通过.style.xxx修改了它的样式？” 其实原理很简单，动手试几次就能掌握～
希望这篇文章能帮你跨过JS操作网页元素的第一道门槛！如果有不明白的地方，欢迎留言讨论～
评论