正文 

当前位置： 首页 > 问答 >

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

     2023-05-07     111

关键词：

【中文标题】如何使用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 更改单选按钮的值

】使用内联javascript更改单选按钮的值【英文标题】：Usingin-linejavascripttochangethevalueofaradiobutton【发布时间】：2012-11-0123:01:03【问题描述】：我有一个带有两个单选按钮的表单。一个按钮标识为“trigger_unit”，另一个按钮标识为“n... 查看详情

javascript 从另一个页面更改元素

】javascript从另一个页面更改元素【英文标题】：javascriptchangeelementfromanotherpage【发布时间】：2015-10-0113:40:24【问题描述】：我有两个使用javascript的按钮。首先创建文本并删除链接，第二创建链接并删除文本点击链接可以改变文... 查看详情

如何使用 Javascript 更改元素中的一个类

】如何使用Javascript更改元素中的一个类【英文标题】：HowdoichangeoneoftheclassesinanelementwithJavascript【发布时间】：2020-08-1903:06:09【问题描述】：如果我有库实现和元素“h1”，我如何使用javascript仅将其背景颜色“黑色”更改为“白... 查看详情

如何在flex中访问内联组件的元素？

】如何在flex中访问内联组件的元素？【英文标题】：Howtoreachelementsofaninlinecomponentinflex?【发布时间】：2011-10-1401:54:06【问题描述】：我对内联组件有疑问。我想从另一个组件访问一个内联组件。从第一个组件，我想更改第二个组... 查看详情

如何使用 JavaScript 将所有 HTML 元素子元素移动到另一个父元素？

】如何使用JavaScript将所有HTML元素子元素移动到另一个父元素？【英文标题】：HowtomoveallHTMLelementchildrentoanotherparentusingJavaScript?【发布时间】：2014-01-2112:09:18【问题描述】：想象一下：<divid="old-parent"><span>Foo</span><b... 查看详情

如何使用 JavaScript 更改 span 元素的文本？

】如何使用JavaScript更改span元素的文本？【英文标题】：HowdoIchangethetextofaspanelementusingJavaScript?【发布时间】：2010-11-2410:25:39【问题描述】：如果我有一个span，说：<spanid="myspan">hereismytext</span>如何使用JavaScript将“hereismyte... 查看详情

如何使用javascript更改href值？

】如何使用javascript更改href值？【英文标题】：Howtochangehrefvalueusingjavascript?【发布时间】：2021-05-0107:10:57【问题描述】：我有一个wordpress网站和主题，它使我能够更改仅出现在所有页面上的菜单小部件中的元素。所以，我想做的... 查看详情

如何使用javascript动态更改html中svg的文本内容

】如何使用javascript动态更改html中svg的文本内容【英文标题】：Howtodynamicallychangethetextcontentofsvginhtmlwithjavascript【发布时间】：2015-09-2215:57:59【问题描述】：我的要求是从g和另一个文本元素中删除文本元素。但是当我运行这段代... 查看详情

如何使用 JavaScript 更改元素的类？

】如何使用JavaScript更改元素的类？【英文标题】：HowcanIchangeanelement\'sclasswithJavaScript?【发布时间】：2010-09-1619:02:38【问题描述】：如何更改HTML元素的类以响应onclick或使用JavaScript的任何其他事件？【问题讨论】："class属性主要... 查看详情

如何使用 JavaScript 更改元素的类？

】如何使用JavaScript更改元素的类？【英文标题】：HowcanIchangeanelement\'sclasswithJavaScript?【发布时间】：2010-09-1619:02:38【问题描述】：如何更改HTML元素的类以响应onclick或使用JavaScript的任何其他事件？【问题讨论】："class属性主要... 查看详情

如何在Javascript中使用其旁边元素的值更改单元格的元素？

】如何在Javascript中使用其旁边元素的值更改单元格的元素？【英文标题】：HowtochangetheelementofacellwiththevalueoftheelementnexttoitinJavascript?【发布时间】：2017-07-1714:13:51【问题描述】：在代码sn-p下面的表格中，我希望一旦单击一个项目... 查看详情

如何仅使用 vanilla JavaScript 和 Node-API 将多个 div 元素包装在另一个元素节点周围？

】如何仅使用vanillaJavaScript和Node-API将多个div元素包装在另一个元素节点周围？【英文标题】：Howdoesonewrapmultiplediv-elementsaroundanotherelement-nodeusingvanillaJavaScriptandtheNode-APIonly?【发布时间】：2021-11-1418:22:18【问题描述】：我使用的是... 查看详情

如果一个元素包含在另一个元素中，如何检查Javascript

】如果一个元素包含在另一个元素中，如何检查Javascript【英文标题】：HowtocheckinJavascriptifoneelementiscontainedwithinanother【发布时间】：2011-01-1503:40:01【问题描述】：如何检查一个DOM元素是否是另一个DOM元素的子元素？有没有内置的... 查看详情

如何使用 css 和/或 javascript 动态更改样式

】如何使用css和/或javascript动态更改样式【英文标题】：Howtodynamicchangestyleswithcssand/orjavascript【发布时间】：2019-08-1809:58:59【问题描述】：我有一个按钮，我需要在单击它时更改一些样式。我可能可以通过添加和删除一些类轻松... 查看详情

垂直对齐内联列表项上的文本

...ddle.net/qvuCm/注意：标记无法更改。希望只使用CSS，而不是JavaScript。【问题讨论】：【参考方案1】：进行了以下 查看详情

查找正在更改 DOM 元素的 javascript

】查找正在更改DOM元素的javascript【英文标题】：FindjavascriptthatischangingDOMelement【发布时间】：2014-09-1718:43:46【问题描述】：有什么技术可以用来找出javascript正在改变HTML元素吗？我很难找到特定元素如何在加载时添加display:none的... 查看详情

css3使用javascript触发过渡效果

使用 :hover 和 :focus 这样的伪类，我们可以很方便的将元素从一个样式切换到另一个样式，而且切换是会有过渡效果。但有时我们想要使用 js 来驱动过渡（即在代码中触发过渡）也是可以实现的。和普通过... 查看详情

Javascript：如何将所有选项从一个选择元素复制到另一个？

】Javascript：如何将所有选项从一个选择元素复制到另一个？【英文标题】：Javascript:Howtocopyalloptionsfromoneselectelementtoanother?【发布时间】：2011-09-0602:54:56【问题描述】：如何将一个select元素的所有options复制到另一个？请给我最简... 查看详情