更改 javascript 元素样式

Question

我正在尝试在我的开发站点中获取一个 javascript 元素并更改它的样式。我运气不好 - 这是网站的链接http://www.best-foods-for-fat-burning.com/wordpress/cat/עוף。 <span class="price"> 有一个带有 NodeName = "#text" 的元素，我想更改它的样式。我该如何尝试改变它？我尝试了以下方法来“抓取”元素但没有成功：

var x=document.getElementsByName("#text");
 alert(x.length); 
var y=document.getElementById("#text"); 
alert(y.length); 
var z=document.getElementsByTagName("#text"); 

关于我应该如何抓取元素并更改其样式的任何建议？

Answer 1

从您的问题中并不能立即看出这一点，但最终我发现NodeName="#text" 意味着您正在处理text node。这不是元素。

您不能直接设置文本节点的样式。您只能设置元素节点的样式，并让它们的样式影响其中的文本。

---

你提到<span class="price">，所以想必text节点是span的子节点。

您可以使用该类设置样式（第一个匹配）：

document.querySelector('span.price').style.someProperty = "someValue";

或者您可以使用querySelectorAll 并遍历生成的节点列表来设置所有匹配元素的样式。

---

由于您在提出问题时特别提到了文本节点的样式，因此您可能会遇到如下情况：

<span> foo <i> bar </i> baz </span>

...您希望将“foo”和“baz”设置为与“bar”不同的样式。为此，您通常需要设置 span 的样式，然后覆盖 span i 的样式。

或者，您可能想要设置foo 的样式而不接触bar 或 baz。在这种情况下，您需要额外的元素。

    <span> <span>foo</span> <i> bar </i> baz </span>

现在您可以设置span span 的样式。

Answer 2

你应该这样做：

var x = document.getElementById('text');//no need to use hash for the id

或者如果你更喜欢使用 jquery，那么就这样使用：

var x = $('#text');//need to use hash for the id

现在，您可以使用x.length