焦点的获取与失去时改变焦点元素的样式

最新推荐文章于 2025-02-24 23:24:00 发布

blant22000

最新推荐文章于 2025-02-24 23:24:00 发布

阅读量4.4k

点赞数

分类专栏： JavaScript 文章标签： input function button action html

本文链接：https://blog.youkuaiyun.com/blant22000/article/details/4468064

版权

JavaScript 专栏收录该内容

3 篇文章

订阅专栏

实现此功能，是根据元素的onfocus和onblue事件实现。

代码如下，此处有两种方式实现，一种为直接更改，另一种为样式文件

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>JSP Page</title> <mce:script type="text/javascript"></mce:script> <mce:style type="text/css"></mce:style><style type="text/css" mce_bogus="1"> .getfocus{background:red} .losefocus{background-color:yellow} </style> </head> <body> /** 当超连接获得焦点时，醒目显示，焦点离开时，还原为原来的背景色方法一：在超链接内部直接改变背景色，添加下列代码实现： οnfοcus="this.style.background='red';" οnblur="this.style.background=''" 方法二：引入不同的样式： οnfοcus="this.className='getfocus';" οnblur="this.className='losefocus'" */ <br> <br> <form action="#" οnsubmit="return true"> <input type="text" name="id" id="id"> <input type="submit" οnclick="return funSearch();"> <input type="button" name="setfocus" value="setfocus" οnclick="funSetfocus();"> </form> <br> <a href="#" mce_href="#" id="id4" οnfοcus="this.className='getfocus';" οnblur="this.className='losefocus'">id4</a> <br> <br> <a href="#" mce_href="#" id="id1" οnfοcus="this.style.background='red';" οnblur="this.style.background=''">id1</a> <br> <br> <br> <a href="#" mce_href="#" id="id2" οnfοcus="this.style.background='red';" οnblur="this.style.background=''">id2</a> <br> <a href="#" mce_href="#" id="id3" οnfοcus="this.style.background='red';" οnblur="this.style.background=''">id3</a> <br> < </body> </html>

当超连接获得焦点时，醒目显示，焦点离开时，还原为原来的背景色
        方法一：在超链接内部直接改变背景色，添加下列代码实现：
        οnfοcus="this.style.background='red';" οnblur="this.style.background=''"
        方法二：引入不同的样式：
        οnfοcus="this.className='getfocus';" οnblur="this.className='losefocus'"