如何使用javascript更改内联另一个元素的样式？
Posted
技术标签:
【中文标题】如何使用javascript更改内联另一个元素的样式？【英文标题】：How to change the style of another element inline using javascript? 【发布时间】：2017-06-28 14:50:21 【问题描述】：我想使用 javascript 在 html 元素中更改另一个元素的样式。
我已经使用下面的代码来更改当前的 html 元素。
<p onmouseover="this.style.color = 'black;">This text should be changed</p>
<h1>How to change this element when hovered on p element</h1>
我想使用 javascript 更改 p 标签内其他元素的样式。
谁能帮忙？
【问题讨论】：
Add inline style using Javascript的可能重复 不清楚问题... 为什么用js简单用cssp:hover + h1"add your style
【参考方案1】：
使用 CSS 你可以达到同样的效果
<style>
p:hover + h1
background-color : red
</style>
【讨论】：
【参考方案2】：这应该是你所追求的（不是我的工作）——查看小提琴链接......
<html>
<body>
<span id="div1" style="color:black;" onmouseover="stext()" onmouseout="htext()">TEXT1</span><p />
<hr color="black" />
<span id="div2" style="color:red;" onmouseover="htext()" onmouseout="stext()">Text2</span>
</body>
http://jsfiddle.net/FFCFy/16/
【讨论】：
【参考方案3】：例如，如果你想改变颜色：
<script>
document.getElementByTagName("p").style.color = "blue";
</script>
这可能应该绑定到一个事件，根据你想要做的事情
【讨论】：
【参考方案4】：使用这个：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<p style="color:red;" onmouseover="ch(event)">This text should be changed</p>
<h1>How to change this element when hovered on p element</h1>
<script>
function ch(e)
e.target.style.color = "black";
alert();
</script>
</body>
</html>
【讨论】：
【参考方案5】：与 Javascript 一起使用
function change(that)
document.getElementsByTagName('h1')[0].style.color="red";
<p onmouseover="change()">This text should be changed</p>
<h1>How to change this element when hovered on p element</h1>与 css 一起使用
p:hover + h1
color:red;
<p >This text should be changed</p>
<h1>How to change this element when hovered on p element</h1>【讨论】：
【参考方案6】：jQuery("p").mouseover(function()
jQuery("h1").css("color", "yellow");
);
【讨论】：
【参考方案7】：你可以用 jQuery 轻松实现：
$(function()
$('#a-element').hover(function()
$('#b-element').css('background-color', 'yellow');
, function()
// on mouseout, reset the background colour
$('#b-element').css('background-color', '');
);
);
如果#b 紧跟在#a 之后，最简单的解决方案是纯css：
#a:hover + #b
background: #ccc
如果#a 和#b 之间是其他元素，你必须像这样使用~：
#a:hover ~ #b
background: #ccc
【讨论】：
以上是关于如何使用javascript更改内联另一个元素的样式？的主要内容，如果未能解决你的问题，请参考以下文章