使用 jQuery attr() 设置“css”答案

【问题标题】：Using jQuery attr() to set “css”使用 jQuery attr() 设置“css”
【发布时间】：2014-09-01 11:18:26
【问题描述】：

我正在阅读《jQuery Pocket Reference》一书，O'Reilly，2011 年。

第 15 页上写着：

'例如调用 attr("css", {backgroundColor:"gray"}) 与调用 css({backgroundColor:"gray"}) 是一样的。'

但我无法使 attr(“css”, { }) 工作。我的测试代码：http://jsfiddle.net/4UMN3/4/

$(function() {
$("#btnChangeColor").click(function () {
$("#spanText").attr("css", { backgroundColor: "gray" });

 });

});

css() 方法工作正常，http://jsfiddle.net/4UMN3/5/

【问题讨论】：

the docs 中对此一无所知。可能是error in the book。
如果您有.css()，为什么还需要使用.attr()？
这个对应second confirmed error on O'Reilly's site吗？
@Blazemonger - 很好的发现，就是这个。作者搞砸了。
是的，这本书肯定是错的

标签： jquery css attr

【解决方案1】：

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

【讨论】：

【解决方案2】：

你使用 jQuery，所以你必须使用 css 而不是 attr，因为 css 添加 property em> 但 attr 将替换所有 style 如果存在！

【讨论】：

【解决方案3】：

$("#id").attr('style',  'color:red;cursor:pointer');

【讨论】：

【解决方案4】：

=> .css 方法修改样式属性而不是“css”。

$().att('style' , 'backgroundColor : gray');

=> html 中没有 css 属性这样的东西

【讨论】：

【解决方案5】：

应该是这样的

$("#spanText").attr('style', 'background-color:gray');

这可能有效，但有一些问题：

最好更改style 属性而不是style 属性。
它将替换所有以前设置的内联样式。

那么，如果你使用jQuery，最好使用css方法：

$("#spanText").css('background-color', 'gray');

但是style 属性在 vanilla-js 中很有用：

document.getElementById("spanText").style.backgroundColor = 'gray';

【讨论】：

【解决方案6】：

替换：

$("#spanText").attr("css", { backgroundColor: "gray" });

与

$("#spanText").attr('style',  'background-color:gray');

【讨论】：

【解决方案7】：

我认为 jQuery 的 .attr() 只能影响元素的属性。 HTMLElements 不知道一个名为“css”的属性（意思是<div css="something"></div>）。

所以，正确的用法应该是

$("#spanText").attr("style",{backgroundColor:"gray"});

但这输出

<span id="spanText" style="[object Object]">This is a test</span>

一个真正有效的例子是

$("#spanText").attr("style","background-color:gray;");

【讨论】：

.css() 函数理解对象字面量语法，.attr() 方法不理解。
我从来没有声称不同的东西。我只是想说明为什么显示的语法不起作用。
我只是为了任何读者的利益发表评论 - 不是批评你的回答。