jQuery .css does not work

Question

I have the following code and it doesn't seem to work at all. No border is drawn. I there anything wrong? (I have jQuery included correctly because other parts, which use it, work)

<script>
$(document).ready(function() {
    $('#login').css({"border":"3px solid black"});
});
function setBorder() {
    $('#login').css({"border":"1px solid black"});
}
</script>
<div id="#login">
    <form>
        Username: <input type="text" /><input type="button" value="Log in" onclick="setBorder();"/>
    </form>
</div>

Instead of changing CSS rules directly, you should add and remove classes from tags. P.S. The "username:" should be in <label> tag. — tereško
– tereško, Commented Dec 13, 2011 at 12:56
<div id="#login"> -> <div id="login"> as suggested by Quentin. — OnesimusUnbound
– OnesimusUnbound, Commented Dec 13, 2011 at 12:59

Quentin · Accepted Answer · 2011-12-13 12:55:28Z

9

Your selector matches "An element with the id 'login'" but your element has the id '#login'.

Remove the # from the ID. The character isn't allowed in ids in HTML 4 anyway.

answered Dec 13, 2011 at 12:55

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Johannes Kommer · Accepted Answer · 2011-12-13 13:15:21Z

3

You must change id="#login" to -> id="login"

edited Dec 13, 2011 at 13:15

Johannes Kommer

6,4711 gold badge43 silver badges46 bronze badges

answered Dec 13, 2011 at 12:58

Spikey21

4392 silver badges8 bronze badges

Comments

Jean-Philippe Gire · Accepted Answer · 2011-12-13 13:01:55Z

2

Two things wrong with your code :

the ID login doesn't need the # in the html
The .css function you call is $elem.css('property','new value')

Correct code would be

<script>
$(document).ready(function() {
    $('#login').css("border","3px solid black");
});
function setBorder() {
    $('#login').css("border","1px solid black");
}
</script>
<div id="login">
    <form>
        Username: <input type="text" /><input type="button" value="Log in"     onclick="setBorder();"/>
    </form>
</div>

answered Dec 13, 2011 at 13:01

Jean-Philippe Gire

9017 silver badges15 bronze badges

Comments

Dominic Green · Accepted Answer · 2011-12-13 12:56:27Z

1

Set border is never called also you should not have a # in your id

 <script>
$(document).ready(function() {
    $('#login').css({"border":"3px solid black"});
     setBorder();

});
function setBorder() {
    $('#login').css({"border":"1px solid black"});
}
</script>
<div id="login">
    <form>
        Username: <input type="text" /><input type="button" value="Log in" onclick="setBorder();"/>
    </form>
</div>

answered Dec 13, 2011 at 12:56

Dominic Green

10.3k4 gold badges32 silver badges36 bronze badges

Comments

Erick Petrucelli · Accepted Answer · 2011-12-13 13:04:59Z

1

Like others said, you need to remove # from the ID, since it isn't allowed as a valid HTML ID:

<div id="login">

Also, your setBorder() can be called from jQuery, not directly with obstrusive JavaScript:

$('input[type=button]').click(setBorder);

Look at the working sample here: http://jsbin.com/ihixub/edit#javascript,html

answered Dec 13, 2011 at 13:04

Erick Petrucelli

15.1k9 gold badges68 silver badges89 bronze badges

Collectives™ on Stack Overflow

jQuery .css does not work

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related