jQuery改变HTML元素的风格

时间:2013-04-18 14:50:25

标签: jquery html css

我有一个关于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设置我的元素样式有什么不对?

感谢

7 个答案:

答案 0 :(得分:196)

使用此:

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

另外,正如其他人所说,如果你想同时进行多次css更改,那就是你要添加花括号(用于对象表示法),它会看起来像这样(如果你想改变,说,'background-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.

答案 1 :(得分:19)

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

不是冒号,逗号

答案 2 :(得分:12)

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

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

答案 3 :(得分:5)

你也可以像这样指定多个样式值

$('#navigation ul li').css({'display': 'inline-block','background-color': '#ff0000', 'color': '#ffffff'});

答案 4 :(得分:2)

我认为您也可以使用此代码: 你可以更好地管理你的班级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>

答案 5 :(得分:1)

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

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>

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

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

答案 6 :(得分:-1)

使用jquery更改样式

尝试一下

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

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

尝试一下

$('#replace-div').css({'padding-top': '5px' , 'margin' : '10px'});