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 简单控制字体的显示与隐藏事例分享

  • webstorm怎么替换
  • axure9中怎么设置输入框的提示语句
  • Axure 文本框回车触发事件
  • Axure设置元素横向分布排列
  • AxureRP如何设置元件位置
  • 热门搜索
    忒是什么意思 半胱氨酸的作用 无拘无束的意思 莫逆之交是什么意思 什么叫三资企业 喃喃的意思 窃窃私语的意思 use是什么意思 渲染的意思 乐不可支的意思