How to use css in jquery

Question

css:

.level0 ul {list-style-type: none; height: 80px; width: 600px; margin: auto;}
    .level0 li {float: left;}
    .level1 ul {list-style-type: none; height: 80px; width: 600px; margin: auto;}
    .level1 li {float: left;}
    .level2 ul {list-style-type: none; height: 80px; width: 600px; margin: auto;}
    .level2 li {float: left;}

css in javascript:

    <script>
function getId(id){
           $('.level'+id +' ul').css('list-style-type: none', 'height: 80px', 'width: 600px', 'margin: auto');
            $('.level'+id +' li').css('float: left');
}
    </script>

When I use css normal is ok, but when using css in javascript is error, can you help me ?

You really really need to read the documentation api.jquery.com/css — Bojangles
– Bojangles, Commented Jul 8, 2011 at 7:12
Yes, I have a doc in api.jquery.com, but when use this code css jquery is not run — Hải Trương
– Hải Trương, Commented Jul 8, 2011 at 7:40

ThiefMaster · Accepted Answer · 2011-07-08 07:13:08Z

6

Why didn't you read the .css() docs?!

$('selector').css({
    attr: 'value',
    anotherattr: 'anothervalue'
});

Note that attrs use the JavaScript syntax for CSS attributes, i.e. lowerCamelCase instead of lower-with-dashes. That means listStyleType instead of list-style-type for example.

Besides that, only use .css() if you cannot use regular CSS. In many cases it's more appropriate to create a CSS class and the .addClass() this class.

answered Jul 8, 2011 at 7:13

ThiefMaster

320k85 gold badges608 silver badges648 bronze badges

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

Comments

Headshota · Accepted Answer · 2011-07-08 07:12:24Z

4

You can pass parameters to css method in two ways:

$('.level'+id +' ul').css("property","value");

or multiple properties using an javascript object:

$('.level'+id +' ul').css({"property1":"value1","property2","value2"});

answered Jul 8, 2011 at 7:12

Headshota

21.4k13 gold badges63 silver badges82 bronze badges

Comments

arkigos · Accepted Answer · 2011-07-08 07:13:33Z

1

Bad syntax. You need squiggly brackets on multiple css items. Also, quote each element, not the whole entry. See below:

<script>
function getId(id){
       $('.level'+id +' ul').css({
           'listStyleType': 'none', 
           'height': '80px', 
           'width': '600px', 
           'margin': 'auto'
       });
        $('.level'+id +' li').css('float: left');
}
</script>

answered Jul 8, 2011 at 7:13

arkigos

3621 silver badge8 bronze badges

Comments

Jon · Accepted Answer · 2011-07-08 07:15:56Z

1

I think your problem is that the Jquery code should be within $(document).ready(function()

$(document).ready(function() {
  $('.level'+id +' ul').css('list-style-type: none', 'height: 80px', 'width: 600px', 'margin: auto');
  $('.level'+id +' li').css('float: left');
});

otherwise the javascript is going to be called before the HTML exists and no css will be applied since there is not HTML to apply it to.

answered Jul 8, 2011 at 7:15

Jon

7841 gold badge10 silver badges28 bronze badges

1 Comment

Jon Over a year ago

oh, and the squiggly brackets mentioned above ;)

Milimetric · Accepted Answer · 2011-07-08 07:24:48Z

1

You need the syntax $(selector).css('property', 'value'); Check out the documentation:

http://api.jquery.com/css/

And a working sample I put up:

http://jsfiddle.net/awGrk/17/

answered Jul 8, 2011 at 7:24

Milimetric

13.5k4 gold badges49 silver badges57 bronze badges

Collectives™ on Stack Overflow

How to use css in jquery

5 Answers 5

Comments

Comments

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related