javascript - 关于实现"输入框"获得焦点时改变父级背景图片问题？
本文介绍了javascript - 关于实现"输入框"获得焦点时改变父级背景图片问题？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
想在输入框获得焦点时，改变父级的背景图片（我在输入框框外包了一个有背景图片的div），div不能直接获得焦点即使加了 tabindex 属性，我想尝试用css写，我先用了给输入框加：focus伪类的方法，试图通过给输入框(class=search-text)焦点来强行改变父级div背景图片(class=search)，代码如下：
.search-text:focus .search{
background: url(cssimg/frame_bg.png) no-repeat -234px -162px;}
结果是并不能改变背景图片。我想知道是否可以通过css来实现这个效果？
css行不通，于是我用js去实现，还是碰到了问题，可能是我哪里又粗心了（我的js不好呜呜呜）希望大神指点指点，写了两种写法，不知道为什么还是实现不了，代码如下：
var otext=document.getElementById('searchtext');
var osearch=document.getElementById('search');
otext.onfocus=function(){
osearch.style.background=" url(cssimg/frame_bg.png) no-repeat -234px -162px";}
第二种写法
osearch.style.backgroundImage="url(cssimg/frame_bg.png)";
osearch.style.backgroundPositionX="-234px";
osearch.style.backgroundPositionY="-162px";
我刚刚把我自己写的这个输入框的代码单独拿出来写了个demo,发现可以正常显示，demo代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#search{
position:relative;
height: 39px;
width: 228px;
z-index: 2;
background: url(cssimg/frame_bg.png) no-repeat 0 -162px;
}
.search-text{
border: 0 none;
color: #c3c3c3;
height: 20px;
line-height: 20px;
width: 180px;
margin: 9px 0 10px 15px;
outline: none;
}
.go-search{
background: url(cssimg/search.jpg) no-repeat;
border: 0 none;
cursor: pointer;
height: 30px;
position: absolute;
right:7px;
top: 4px;
z-index: 2;
width: 28px;
outline: none;
}
</style>
<script type="text/javascript">
window.onload=function(){
var stext=document.getElementById('searchtext');
var search=document.getElementById('search');
stext.onfocus=function(){
search.style.background="url(cssimg/frame_bg.png) no-repeat -234px -162px";
// search.style.backgroundImage="url(cssimg/frame_bg.png)";
// search.style.backgroundPositionX="-234px";
// search.style.backgroundPositionY="-162px";
this.value='';
};
stext.onblur=function(){
search.style.background="url(cssimg/frame_bg.png) no-repeat 0px -162px";
//第二种写法
// search.style.backgroundImage="url(cssimg/frame_bg.png)";
// search.style.backgroundPositionX="0px";
// search.style.backgroundPositionY="-162px";
if(this.value.length < 1) this.value='请输入';
};
};
</script>
</head>
<body>
<div id="search">
<form action="#type">
<input class="search-text" id="searchtext" type="text" value="请输入" >
<input class="go-search" type="button" >
</form>
</div>
</body>
</html>
那估计是我其他地方可能出问题影响到了，只能再查查其他地方了。
解决方案
伪类的写法应该只能针对元素本身，所以我认为通过css实现的方法是不行的，但是js是一定可以实现的，因为题主没有给出代码，所以自己写了个小demo测试了一下是没问题的
`
<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<title>css实现改变背景图</title>
<style type="text/css">
#search{
width: 600px;
height: 300px;
text-align: center;
background: url('111.jpg');
}
</style>
</head>
<body>
<div id ="search">
<input type="text" id="searchtext">
</div>
</body>
<script type="text/javascript">
var search = document.getElementById('search');
//console.log(search);
var searchtext = document.getElementById('searchtext');
//console.log(searchtext);
searchtext.onfocus=function(){
search.style.background="url(222.png)";
};
</script>
</html>
`
图片就不提供了，随便找两张，修改一下对应名称就好，如果题主想看看自己代码的错误也可以贴上来交流下看看
这篇关于javascript - 关于实现"输入框"获得焦点时改变父级背景图片问题？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
