Question

我正在尝试使用JavaScript的style属性。但是，显然，我做错了。我是JavaScript的新手，所以关于JavaScript的style属性的一般概念会很棒。我想改变JavaScript元素的地点，颜色和文本装饰等。我认为在HTML中声明div changeMe的样式属性将适用于JavaScript。因为，JavaScript需要它的id。我想使用div中的所有样式属性。我在哪里错过了？我试图这样做：

<div id="changeMe" style="position: absolute;text-decoration: none; 
                          color: white;right:43%; top: 90px;">
    <a href="home.php" >Go to homepage</a>
</div>

使用Javascript：

var testElement = document.getElementById("changeMe");
var text = "aaa".document.getElementById("changeMe");
text.style.textDecoration = "none"; //I changed style here too because first did not       
//work.

check.onfocus= function()
{   
    testElement.innerHTML = text.link("index.php");;
}

请帮我理解结构。我卡住了。谢谢

Answer 1

您的JavaScript将在此处出错：

var text = "aaa".document.getElementById("changeMe");

...因为"aaa"是一个字符串，字符串没有document属性。脚本的其余部分将不会执行。

如果您修复了该行，那么：

text.style.textDecoration = "none";

......没有任何效果。 文字装饰是链接样式的一部分，而不是div的一部分。

您需要设置<a>元素的样式。如果你真的想通过JS获得它，那么你可以：

testElement.getElementsByTagName('a')[0]

但是你最好只使用样式表：

#changeMe a { text-decoration: none; }

但请确保您执行其他操作以明确指出未加下划线的文本是一个链接。

Answer 2

这里肯定有点可疑。

var text = "aaa".document.getElementById("changeMe");

// Without those "aaa"
var text = document.getElementById("changeMe");

// To change the <a> style inside the 'changeMe' <div>
var alinks = text.getElementsByTagName("a");
for (var i=0; i<alinks.length; i++) {
  alinks[i].style.textDecoration = "none";
}

Here it is in action.

Answer 3

您尝试设置div的样式，但是您需要将text-decoration和color样式应用于a标记本身才能生效。

顺便说一下，所有这些都可以通过级联样式表轻松完成。

Answer 4

document.getElementById("changeMe").firstChild.style.textDecoration = "none";

工作示例：http://jsfiddle.net/8Evyq/

如何使用JavaScript进行样式

4 个答案: