在onclick上使用内联javascript设置元素样式

Question

我正在尝试设置链接的样式。我有一个外部样式表，在HTML中我指向工作表的正确位置，所以这不是问题。我想在触发text-decoration事件时更改onclick。我有：

<a class="dopelink"onclick="document.getElementsByTagName("link").style.textDecoration="underline" " href="mylink.htm" >MY Link</a>

我做错了什么？

Answer 1

<a class="dopelink" style="text-decoration:none" onmousedown="this.style.textDecoration='underline'" href="mylink.htm">My link</a>

您的JavaScript必须使用单引号，因为您的HTML使用双引号。

将text-decoration设置为none，因为默认情况下带有下划线。单击元素时会发生这种情况。

使用this代替document.getElementsByTagName。由于它是内联javascript，它可以引用自己。

使用onmousedown代替onclick。

Answer 2

我希望我理解，如果没有，那么我很抱歉：/

为你的html标签创建一个：hover选项...例如我在HTML代码中有“a”标签，如下所示：

<a href="somewhere.html">Take me somewhere</a>

我想做的是，这个div的颜色是红色的，当我指向这个div时，我的鼠标会将颜色改为蓝色并在那里加下划线，所以我在css中的代码看起来像这样：

a {
   color: #F00;
}

a:hover {
   color: #00F;
   text-decoration: underline;
}

Answer 3

您的代码无效，因为getElementsByTagName返回多个元素（它返回数组对象属性）。你必须循环思考每一个。 你可以查看这个fiddle。点击后，我将 text-decoration 设置为 none 。

在测试功能（称为 onclick ）中，您遍历ElementsByTagName为您提供的每个标记。在此循环中，您可以设置text-decoration属性。

function test(){
var links = document.getElementsByTagName("a");

for (var l = 0; l < links.length; l++){
  links[l].style.textDecoration ='none';
}}