jQuery 如何覆盖css属性？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3930304/
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
How to override css property?
提问by Vikas
I have tried to use jquery, but could not override the width property of the .gridHeaderclass.
我曾尝试使用 jquery，但无法覆盖类的 width 属性.gridHeader。
I'd like to fix (let's say 100px) the width of the first column in the table.
我想修复（假设为 100 像素）表格中第一列的宽度。
<html>
<head>
<style>
html, body {
font-family:Tahoma;
font-size:11px;
}
.grid {
border-left:1px solid #CCCCCC;
border-top:1px solid #CCCCCC;
}
.gridHeader {
background-color:#EFEFEF;
border-bottom:1px solid #CCCCCC;
font-weight:bold;
height:20px;
padding-left:3px;
text-align:left;
width:100%; /* problematic, that I cannot change*/
}
table.grid > tbody > tr > td {
border-bottom:1px solid #CCCCCC;
border-right:1px solid #CCCCCC;
padding:3px;
}
</style>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".gridHeader").css("width","");
});
</script>
</head>
<body>
<table width="100%">
<tr>
<td class="gridHeader" style="width:100px">Vikas
</td>
<td class="gridHeader">Vikas Patel Vikas Patel Vikas Patel
</td>
<td class="gridHeader">Vikas Patel Vikas Patel
</td>
</tr>
<tr>
<td>Vikas
</td>
<td>Vikas Patel Vikas Patel Vikas Patel
</td>
<td>Vikas Patel Vikas Patel
</td>
</tr>
</table>
</body>
</html>
回答by Sarfraz
You need to remove the inline style with removeAttrand then use the css()method like this:
您需要删除内联样式，removeAttr然后使用如下css()方法：
$(".gridHeader").removeAttr('style').css("width","100px");
If you want to apply the width to first column only, you can use the :firstfilter selector like this:
如果您只想将宽度应用于第一列，您可以:first像这样使用过滤器选择器：
$(".gridHeader:first").removeAttr('style').css("width","100px");
回答by Dr.Molle
I guess your problem is not the first column, but the others, while they still have 100% applied.
我想您的问题不是第一列，而是其他列，而它们仍然 100% 应用。
$(".gridHeader").css("width","");
...won't work, because you did not set a legal value.
...不起作用，因为您没有设置合法值。
Try this:
尝试这个：
$(".gridHeader").not(':first-child').css("width","auto");
回答by jAndy
Works fine for me? Unless I don't understand your "problem".
对我有用吗？除非我不明白你的“问题”。
回答by Shawn
If you wanted to override the CSS inline, you may have luck doing it like this:
如果你想重写 CSS 内联，你可能很幸运这样做：
style="width:100px !important;"
