开发者

Javascript function to change button colour

Can someone show me whats wrong with this:

<html>

    <script type = "text/javascript">
        function colourGreen()
        {
            document.getElementById("button1").style.bgColor = 0xFFFF00;
        }
    </script>
    <body>

        <form action="">
            <div id = "button1">
                <input type="button" value="Colour">
            </div id>
            <div id = "button2">
                <input type="button" value="Price up" onclick = "colourGreen()">
            </div id>
            <div id = "button3">
                <input type="button" value="Price down">
            </div id>
        </form>

    </body开发者_如何学Python>
</html>


document.getElementById("button1").style.backgroundColor = '#FFFF00';


Try:

document.getElementById("button1").style.backgroundColor = '#00ff00';

It is backgroundColor not bgColor


You can create a css rule and change the className of the button to link to that rule.

<style type="text/css">
     .buttonColor{
          background-color: green;
     }
</style>

<script type ="text/javascript">
    function colourGreen() {
        document.getElementById("button1").className = "buttonColor";
    }
</script>

That way if you for some reason decide to change the color or the background you will not have to change it on every page. You will be able to change that one css file.


I'd try

.style.backgroundColor = 0xFFFF00;


I assume your divs are only as big as your buttons and are therefore hidden by the buttons themselves. Change the colour on you button itself instead of the div?

A neater and more reliable way to to edit css of items is using jquery selectors. $("#button1").css("background-color","#ff0000"); Be sure to include the jquery .js file before trying this or you'll get an object expected error.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜