使用 jQuery attr() 设置“css”
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24687431/
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
Using jQuery attr() to set “css”
提问by user3026964
I am reading the book "jQuery Pocket Reference", O'Reilly, 2011.
我正在阅读 O'Reilly 2011 年出版的“jQuery Pocket Reference”一书。
On page 15 it says:
在第 15 页它说：
'For example, calling attr("css", {backgroundColor:"gray"}) is the same as calling css({backgroundColor:"gray"}).'
'例如，调用 attr("css", {backgroundColor:"gray"}) 与调用 css({backgroundColor:"gray"}) 相同。'
But I cannot make the attr(“css”, { }) work. My test code: http://jsfiddle.net/4UMN3/4/
但我不能让 attr(“css”, { }) 工作。我的测试代码：http: //jsfiddle.net/4UMN3/4/
$(function() {
$("#btnChangeColor").click(function () {
$("#spanText").attr("css", { backgroundColor: "gray" });
});
});
The css() method works fine, http://jsfiddle.net/4UMN3/5/
css() 方法工作正常，http://jsfiddle.net/4UMN3/5/
回答by Branimir ?urek
Replace:
代替：
$("#spanText").attr("css", { backgroundColor: "gray" });
with
和
$("#spanText").attr('style', 'background-color:gray');
回答by Oriol
Probably, it was meant to be
大概是这样的
$("#spanText").attr('style', 'background-color:gray');
This may work, but has some problems:
这可能有效，但有一些问题：
- It is preferred to change
styleproperty instead ofstyleattribute. - It will replace all previously set inline styles.
- 最好更改
style属性而不是style属性。 - 它将替换所有先前设置的内联样式。
Then, if you use jQuery, better use cssmethod:
然后，如果您使用 jQuery，最好使用css方法：
$("#spanText").css('background-color', 'gray');
But styleproperty is useful in vanilla-js:
但是style属性在 vanilla-js 中很有用：
document.getElementById("spanText").style.backgroundColor = 'gray';
回答by SVSchmidt
I think jQuery's .attr() can only affect attributes the element has.
HTMLElements do not know an attribute called "css" (meaning <div css="something"></div>).
我认为 jQuery 的 .attr() 只能影响元素具有的属性。HTMLElements 不知道名为“css”（意思是<div css="something"></div>）的属性。
So, the correct usage would be
所以，正确的用法是
$("#spanText").attr("style",{backgroundColor:"gray"});
But this outputs
但这输出
<span id="spanText" style="[object Object]">This is a test</span>
An example that actually works is
一个实际有效的例子是
$("#spanText").attr("style","background-color:gray;");
回答by Kanomdook
$("#id").attr('style', 'color:red;cursor:pointer');回答by karim somai
you use jQuery so you have to use cssand not attr, 'cause cssadd propertybut attrwill replace all styleif existe !
您使用 jQuery，因此您必须使用css而不是attr，因为css添加属性但attr将替换所有样式（如果存在）！
回答by jignasha
<style>
.newClass{
color:#fff;
}
.test2{
color:red;
}
.newclass{
color:blue;
}
</style>
<script>
$(document).ready(function(){
//get style and class name in alert
$('#attr').click(function () {
alert($('h3').attr("style"));
alert($('h3').attr("class"));
});
//set css property
$("#setcss").click(function(){
$("#test").css({"background-color": "#000", "color": "teal"});
});
//change class name property
$('#changeclassname').click(function(){
$('#test3').removeClass('test2').addClass('newclass');
});
});
</script>
<!--get style and class name in alert-->
<h3 class="test" style="color: white; background: red;">This is the tag and this will be our tag</h3>
<button id="attr">get Attribute</button>
<!--set css property-->
<p id="test" class="test1">This is some <b>bold</b> text in a paragraph.</p>
<button id="setcss">set Attribute</button>
<!--change class name property-->
<p id="test3" class="test2">This is some text in a paragraph.</p>
<button id="changeclassname">set Attribute</button>
回答by user117291
=> the .css method modifies the style attribute not the "css" .
=> .css 方法修改 style 属性而不是 "css" 。
$().att('style' , 'backgroundColor : gray');
=> there is no such thing as css attribute in html
=> html 中没有 css 属性这样的东西
