jQuery改变HTML元素的样式 [英] jQuery changing style of HTML element

问题描述

我有一个HTML列表

<div id="header" class="row">
    <div id="logo" class="col_12">And the winner is<span>n't...</span></div> 
    <div id="navigation" class="row"> 
        <ul id="pirra">
            <li><a href="#">Why?</a></li>
            <li><a href="#">Synopsis</a></li>
            <li><a href="#">Stills/Photos</a></li>
            <li><a href="#">Videos/clips</a></li>
            <li><a href="#">Quotes</a></li>
            <li><a href="#">Quiz</a></li>
        </ul>
    </div>  

它会变化为水平显示CSS更改

it changes fine to show horizontally on CSS change

    div#navigation ul li { 
        display: inline-block;
    }

但现在我想用jQuery做，我使用：

but now I want to do it with jQuery, I use:

    $(document).ready(function() {
  console.log('hello');
   $('#navigation ul li').css('display': 'inline-block');
});

但是没有工作，我有什么错误的样式我的元素jQuery？

but is not working, What do i have wrong to style my element with jQuery?

感谢

推荐答案

不要使用：

$('#navigation ul li').css('display': 'inline-block');

而是使用：

$('#navigation ul li').css('display', 'inline-block');

另外，正如其他人所说，如果你想同时进行多个css更改，将添加大括号（对于对象符号），并且它看起来像这样（如果你想改变，比如'background-color'和'position'除了'display'）：

Also, as others have stated, if you want to make multiple css changes at once, that's when you would add the curly braces (for object notation), and it would look something like this (if you wanted to change, say, 'background-color' and 'position' in addition to 'display'):

$('#navigation ul li').css({'display': 'inline-block', 'background-color': '#fff', 'position': 'relative'}); //The specific CSS changes after the first one, are, of course, just examples.

这篇关于jQuery改变HTML元素的样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！