Question

我对Javascript很新，这是我第一次创建自己的函数。我正在尝试根据用户是否单击我创建的按钮来更改链接的颜色。代码如下：

<p align="center">
    <input type="button";
           onclick="changelinks"
           value = "Click this if you can't see the links!"/>
</p>

这是我的功能代码。

<script type="text/javascript">
              function changelinks(links) {
                var element = document.getElementByClass("links");
                element.onclick.color = "#00FF7F";
                 }
                 </script>

您有什么建议让我的功能有效吗？如何将我的功能链接到按钮？在此先感谢，我真的很感激。

Answer 1

其中，这些是一些主要问题：

1.没有getElementByClass - 有getElementsByClassName或getElementById

2. element.onclick.color = "#00FF7F";错了。

3. type="button"; onclick="changelinks"不应该有;和changelinks需要()

试试这个：

<script type="text/javascript">
    function changelinks() {
        var element = document.getElementById("links");
            element.style.color = "#000";
    }
 </script>


<a href="#" id="links" style="color:#fff">Hello</a>

<p align="center">
    <input type="button" onclick="changelinks()" value = "Click this if you can't see the links!"/>
</p>

这是一个简单的示例，可以为一个链接id="links"执行操作。要对同一个班级的多个元素执行类似操作，请参阅this question和the javascript manual。

另外，请注意，此示例使用纯javascript，但使用JQuery可以获得更简洁的解决方案 - 有关详细信息，请参阅Johannes N的答案。

Answer 2

这可以使用jQuery轻松完成。

HTML：

<p id="button">Button</p>
<a href="" class="links">link</a>

JavaScript的：

$(function() {
    $('#button').click(function() {
        $('.links').css("color", "red");
    });
});

工作示例：http://jsfiddle.net/YS79d/

Answer 3

jquery中的addClass和removeClass可以解决这个问题

HTML / CSS

<style>
.links {
color:#FF0000;
}
.links2 {
color:#0000FF;
}
</style>
<p id="button">Button</p>
<a href="" class="links">link</a>

的Javascript

$('#button').toggle(function () {
    $(".links").addClass("links2");
}, function () {
    $(".links").removeClass("links2");
});

Working JSFiddle example

我尝试使用按钮创建动态HTML更新

3 个答案: