如何使用javascript更改内联另一个元素的样式？答案

【问题标题】：How to change the style of another element inline using javascript?如何使用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}

标签： javascript html css

【解决方案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
}

【讨论】：