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

Posted 2023-03-06

【中文标题】聚焦非相关元素时更改元素的样式[重复]

【英文标题】：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！愿原力与你同在。

查看相关***.com/questions/12574668/…

CSS 不能上 DOM。所以要么改变 html 的顺序，要么使用 Javascript

【参考方案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