为什么用border无法实现效果，用borderColor能实现效果？
来源：4-3 编程练习
qq_鸭绿桥第一帅哥_0
2019-02-10 11:32:42
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>习题</title>
</head>
<body>
<input type="text" value=""><span></span>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script>
//此处写代码
$('input').focus(function(){
$('span').text('请输入用户名');
$(this).css('border','blue');
})
$('input').blur(function(){
if ($('span').text('请输入用户名')=="")
{
$('span').text('用户名不能为空');
$('input').css('border','red');
}
else
{
$('span').text('');
$('input').css({'border':'green'});
}
})
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>习题</title>
</head>
<body>
<input type="text" value=""><span></span>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script>
//此处写代码
$('input').focus(function(){
// $('this').css('borderColor','blue');
$('span').text('请输入用户名');
}).blur(function(){
if ($(this).val()=="") {
$(this).css('borderColor','red');
$('span').text('用户名不能为空');
}else
{
$(this).css('borderColor','green');
$('span').text('');
}
})
</script>
</body>
</html>写回答
2回答
-
同学你好，代码中有以下几个问题：
1、因为要改变的是边框的颜色，而borderColor就单指的是边框颜色，后面只接一个颜色值，所以改成borderColor效果就能实现，而border后面是要跟三个值，所以只写一个颜色效果是不实现的，如果想使用border，可以参考下图：
2、通过jq判断input里面有没有内容，条件应该是input里面的value值是否为空，参考下图：
this指向的是当前活动的对象input标签，jq中获取input的value值是通过.val()来获取的。
3、input标签是自带获得焦点的样式的，如果不需要的话，可以通过设置outline：none来去掉，参考下图：
自己测试一下，如果帮助到了你，欢迎采纳。
祝学习愉快！
0 -
qq_鸭绿桥第一帅哥_0
提问者
2019-02-10
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>习题</title> </head> <body> <input type="text" value=""><span></span> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script> <script> //此处写代码 </script> </body> </html>
为什么这段代码没有给input设置获得焦点后边框为蓝色，但是却能实现获得焦点后边框为蓝色？
0
相似问题