jQuery 改变 HTML 元素的样式
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16086201/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery changing style of HTML element
提问by manuelBetancurt
I have a list on 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
在 CSS 更改时水平显示它会改变得很好
div#navigation ul li {
display: inline-block;
}
but now I want to do it with jQuery, I use:
但现在我想用 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?
但不起作用，我用 jQuery 设置元素样式有什么问题？
thanks
谢谢
回答by VoidKing
Use this:
用这个：
$('#navigation ul li').css('display', 'inline-block');
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'):
此外，正如其他人所说，如果您想一次进行多个 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.
回答by Jakub Michálek
$('#navigation ul li').css('display', 'inline-block');
not a colon, a comma
不是冒号，是逗号
回答by Suresh Atta
$('#navigation ul li').css({'display' : 'inline-block'});
It seems a typo there ...syntax mistake :))
这似乎是一个错字......语法错误:)）
回答by themhz
you could also specify multiple style values like this
您还可以像这样指定多个样式值
$('#navigation ul li').css({'display': 'inline-block','background-color': '#ff0000', 'color': '#ffffff'});
回答by pedram shabani
I think you can use this code also: and you can manage your class css better
我认为您也可以使用此代码：并且您可以更好地管理您的类 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>
回答by Love Kumar
changing style with jquery
用 jquery 改变样式
Try This
尝试这个
$('#selector_id').css('display','none');
You can also change multiple attribute in a single query
您还可以在单个查询中更改多个属性
Try This
尝试这个
$('#replace-div').css({'padding-top': '5px' , 'margin' : '10px'});
