Javascript 聚焦非相关元素时更改元素的样式

当我聚焦输入文本元素时，我想更改submit按钮的背景色

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

但是，基于元素的当前设置，我相信span会阻止它们成为同级元素并能够使用

~

选择器

---

那么我如何才能做到这一点呢？是否需要JavaScript？

对于当前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');
});

---

在当前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');
});

---

您必须使用JavaScript，因为DOM受到CSS的限制。尝试以下使用

onblur

和

onfocus

输入参数的操作：

.button{
填充物：2px4px；
字体：13px无衬线；
文字装饰：无；
边框：1px实心#000；
边框颜色：#aaa#444#444#aaa；
边界半径：5px；
颜色：#000
}

---

您必须使用JavaScript，因为DOM受到CSS的限制。尝试以下使用

onblur

和

onfocus

输入参数的操作：

.button{
填充物：2px4px；
字体：13px无衬线；
文字装饰：无；
边框：1px实心#000；
边框颜色：#aaa#444#444#aaa；
边界半径：5px；
颜色：#000
}

试试这个

HTML

看看这个

试试这个

HTML

---

查看此

使用JavaScript！愿原力与你同在。看相关的CSS不能上升到DOM。所以要么改变HTML的顺序，要么使用JavascriptUse JavaScript！愿原力与你同在。看相关的CSS不能上升到DOM。所以要么改变HTML的顺序，要么使用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";
}