Question

javascript input改变css的样式

就是有一组input标签,自身有一个样式.input_bg,在获得焦点的时候变为.input_one_bg,失去焦点时样式还是.input_bg

Answer 1

javascript input改变css的样式使用的语法如下：

document.getElementById(id).style.property=new style

例如：

<p id="p2">Hello World!</p> 
<script> 
document.getElementById("p2").style.color="blue"; 
</script>

备注：JS改变元素属性的方法如下：

<script> 
var div = document.getElementByIdx_x('d1'); 
div.setAttribute("class", "abc"); 
</script>

Answer 2

javascript是吧,绑个事件
如:<input type='text' id='abc' onfocus='getfocus()' onblur='lostfocus()' />

js代码:
function getfocus(){
document.getElementById("abc").className = "input_one_bg";
}
function lostfocus{
document.getElementById("abc").className = "input_bg";
}

jQuery简单一点
$(document).ready(function(){
$("#abc").focus(function(){
$(this).Class("input_one_bg");

})

$("#abc").blur(function(){
$(this).Class("input_bg");

})
})

之前的class名搞错了,已对调

Answer 3

$("input").focus(function(){
  $("input").css("background-image","路径");
});
$("input").blur(function(){
  $("input").css("background-image","路径");
});

追问

需要运用javascript,因为本来页面也没多大,不可能再引进jquery包, 而且是样式,不是背景图片,样式里包括很多,不单单是背景

追答

意思是一样的，你就是取它的焦点事件和失去焦点，我就是举了个例子，css里边你可以自己定义的，写什么都可以，其实jquery也不浪费多少内存，对页面影响也不大，不用jquery，你可以查一下，基本javascript的焦点事件，都差不多的

Answer 4

给它一个聚焦和离焦的事件，聚焦的时候，使用.input_bg 样式，blur时，使用.input_one_bg样式

Answer 5

Vue实践-CSS样式position/display/float属性对比使用