118

我有一个 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 更改时水平显示

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

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

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

但不起作用，我用 jQuery 设置元素样式有什么问题？

谢谢

4

7 回答 7

269

用这个：

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

另外，正如其他人所说，如果您想一次进行多个 css 更改，那么您将添加花括号（用于对象表示法），它看起来像这样（如果您想更改，例如，“背景-color' 和 'position' 除了 '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.
于 2013-04-18T14:51:13.200 回答
22 
$('#navigation ul li').css('display', 'inline-block');

不是冒号，是逗号

于 2013-04-18T14:51:27.953 回答
14 
$('#navigation ul li').css({'display' : 'inline-block'});

那里似乎是一个错字...语法错误:))

于 2013-04-18T14:52:22.030 回答
5

您还可以像这样指定多个样式值

$('#navigation ul li').css({'display': 'inline-block','background-color': '#ff0000', 'color': '#ffffff'});
于 2013-09-02T08:43:51.900 回答
3

我认为您也可以使用此代码：并且您可以更好地管理您的类 css

<style>
   .navigationClass{
        display: inline-block;
        padding: 0px 0px 0px 6px;
        background-color: whitesmoke;
        border-radius: 2px;
    }
</style>
<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>
 <script>
    $(document).ready(function() {
$('#navigation ul li').addClass('navigationClass'); //add class navigationClass to the #navigation .

});
 </script>
于 2017-08-01T10:00:41.797 回答
1

用jquery改变风格

尝试这个

$('#selector_id').css('display','none');

您还可以在单​​个查询中更改多个属性

尝试这个

$('#replace-div').css({'padding-top': '5px' , 'margin' : '10px'});
于 2019-07-05T10:53:33.490 回答
1

<div>获取 a中具有特定id的第二个元素并更改样式：

var post_id = 7;
var heart = $('#' + post_id).children().eq(1);
heart.css('color','red');

注意：这似乎很明显，但它困扰着我，也可能发生在你身上。确保您要修改的样式是 div 本身的，而不是该 div 内的样式。因此，例如，您可能有类似的东西：

<div class="loves_it"><i class="fas fa-heart" style="color:gray"></i></div>

并且显然css()Jquery 的方法不起作用。所以请确保它如下所示：

<div class="loves_it" style="color:gray"><i class="fas fa-heart"></i></div>
于 2021-04-28T13:23:15.863 回答