JQuery 改变 HTML 元素的样式

我有一个关于 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>

it changes fine to show horizontally on CSS change

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

但是现在我想用 jQuery 来做，我使用:

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

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

谢谢

419155 次浏览
小开
最佳答案

用这个:

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

另外，正如其他人所说，如果你想同时做多个 css 修改，那么你就需要添加大括号(用于对象表示法) ，它看起来就像这样(如果你想改变，比如说，除了“ display”之外，还需要改变“ back-color”和“ position”) :

$('#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.
小开 
$('#navigation ul li').css('display', 'inline-block');

不是冒号，是逗号

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

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

小开

you could also specify multiple style values like this 

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

我想你也可以用这个代码: 你可以更好地管理你的课堂 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>
小开

用 jquery 改变样式

试试这个

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

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

Try This

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

Get the second element inside a <div> with an specific 身份证 and change the style:

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

注意: 这可能看起来很明显，但它困扰着我，也可能发生在你身上。确保要修改的样式是 is of the div itself而不是 风格。例如，你可能会有这样的东西:

<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>

提交答案