网站首页 美食营养 游戏数码 手工爱好 生活家居 健康养生 运动户外 职场理财 情感交际 母婴教育 生活知识 知识问答

js 简单控制字体的显示与隐藏事例分享

时间:2026-02-16 00:15:25

1、首先写出最基本的网页架构;

表单 form 中包含着一个 输入框 input ;

下面跟着一个 p 标签用来存放文字;

js 简单控制字体的显示与隐藏事例分享

js 简单控制字体的显示与隐藏事例分享

2、用 css 选择器  .p1 为  p  标签控制位置和里面的字体大小和样式;

js 简单控制字体的显示与隐藏事例分享

3、写入  script 标签之后在里面 定义变量获取 form 和 p 元素(这里通过 id 来获取)

js 简单控制字体的显示与隐藏事例分享

4、之后可以 用 alert 方法来测试一下自己是否选对了对象(熟练了以后细心一点,一般是不会选错的..)之后再将  alert 给注释掉就可以了;

js 简单控制字体的显示与隐藏事例分享

js 简单控制字体的显示与隐藏事例分享

js 简单控制字体的显示与隐藏事例分享

5、然后我们通过 onmouseover 事件(鼠标悬停在某个元素时触发,具体的解释可以百度查询)控制 鼠标移到 输入框  oIn(我们定义的变量)  时 , p标签(这里是 op)的文字显示为红色;

js 简单控制字体的显示与隐藏事例分享

js 简单控制字体的显示与隐藏事例分享

6、用 onmouseout 事件(移除事件),控制 鼠标移出输入框 oIn 时p标签内文字变为白色(隐藏了,注意要和页面颜色一样.)同时 p 的选择器应该也将 color控制的颜色变为 白色(如图)

js 简单控制字体的显示与隐藏事例分享

js 简单控制字体的显示与隐藏事例分享

js 简单控制字体的显示与隐藏事例分享

© 2026 小知经验
信息来自网络 所有数据仅供参考
有疑问请联系站长 site.kefu@gmail.com