聚焦非相关元素时更改元素的样式[重复]答案

【问题标题】：Change style of an element when focusing a non-related element [duplicate]聚焦非相关元素时更改元素的样式[重复]
【发布时间】：2015-10-07 14:51:18
【问题描述】：

当我关注输入文本元素时，我想更改提交按钮的背景颜色。

<input id="submit-element" type="submit">
<span><input id="text-element" type="text"></span>

但是，根据元素的当前设置，我认为 span 会阻止它们成为同级元素并无法使用 ~ 选择器。

那么我该怎么做呢？需要 JavaScript 吗？

【问题讨论】：

使用 JavaScript！愿原力与你同在。
查看相关stackoverflow.com/questions/12574668/…
CSS 不能上 DOM。所以要么改变 HTML 的顺序，要么使用 Javascript

标签： javascript html css

【解决方案1】：

使用当前的 DOM，您不得不使用 javascript。下面有一个jQuery解决方案。

$('input#text-element').focus(function() {
    $('input#submit-element').css('color', 'red');
});

$('input#text-element').focusout(function() {
    $('input#submit-element').css('color', 'black');
});

【讨论】：

【解决方案2】：

您必须使用 JavaScript，因为 DOM 受 CSS 限制。尝试以下操作，它使用 onblur 和 onfocus 输入参数：

.button { 
    padding: 2px 4px;
    font: 13px sans-serif;
    text-decoration: none;
    border: 1px solid #000;
    border-color: #aaa #444 #444 #aaa;
    border-radius: 5px;
    color: #000
}

<a href="#" class="button" id="submit-element">New Element</a>
<span><input id="text-element" type="text" onfocus="document.getElementById('submit-element').style.backgroundColor = 'red'" onblur="document.getElementById('submit-element').style.backgroundColor = 'inherit'"></span>

【讨论】：

【解决方案3】：

试试这个..

HTML

<input id="submit-element" type="submit">
<input id="text-element" type="text">

Javascript

document.getElementById("text-element").addEventListener("focus", changeSubmitF);

function changeSubmitF(){
    document.getElementById("submit-element").style.backgroundColor = "#f4f4f4";
}

document.getElementById("text-element").addEventListener("blur", changeSubmitB);

function changeSubmitB(){
    document.getElementById("submit-element").style.backgroundColor = "transparent";
}

看看这个Fiddle

【讨论】：