Question

我希望在tags聚焦时更改input的边框颜色。

<div class="tags">
  <input type="text">
</div>

Answer 1

使用JavaScript

<div class="tags" id="tags">
    <input type="text" id="text"/>
</div>

的JavaScript

var parent = document.getElementById('tags');
var child = document.getElementById('text')

child.onfocus = function(){
    parent.style.border="1px solid #f00";
}
child.onblur = function(){
    parent.style.border="none";
}

JSFIDDLE

Answer 2

您可以将id提供给您的父元素，将另一个ID提供给您的input代码。然后执行以下操作 - ＆gt;

<强> HTML

<div class="tags" id='parent'>

<input type="text" id='input'>

</div>

如果您想要侦听与输入元素相关的任何更改，可以使用DOM的本机方法之一.addEventListener - ＆gt;

<强>的Javascript

//getting our input element
var input = document.getElementById('input');     

//when the element receives focus 
input.addEventListener('focus', function(){

//getting our input element's parent element

parent = input.parentNode;

//then do the following

parent.style.border = '1px solid brown';

},false); 

//when the element loses focus
input.addEventListener('blur', function(){

//getting our input element's parent element

parent = input.parentNode;

//then do the following

parent.style.border = '1px solid green';

},false);

<强> CSS

#parent{

width:102px; 
height:52px; 
border:1px solid green

}

#input{

width:100px; 
height:50px; 
border:0px solid

}

DEMO

Answer 3

使用jQuery：

$('input[type="text"]').focus(function(){
    $(this).parent().is('.tags').css({"border-color":"#F00"});
});

如果您想使用类或标记而不是唯一ID，则必须考虑如何专门定位与焦点元素关联的元素。

此示例仅针对作为焦点输入的父级的“#tags / .tags / tags”元素。
这段代码是一种灵活的方式来实现您正在尝试的目标。

在关注特定子项时更改父样式

3 个答案: