Verwendet jQuery attr (), um "css"

Ich lese das Buch "jQuery Pocket Reference", O ' Reilly, 2011
In der Seite 15, sagte, es

'Z.B. den Aufruf von attr("css", {backgroundColor:"Grau"}) ist das gleiche wie der Aufruf von css({backgroundColor:"Grau"}).'

Aber ich kann den attr("css", { }) arbeiten. Mein test-code: http://jsfiddle.net/4UMN3/4/ 

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

 });

});

Der css() Methode funktioniert gut, http://jsfiddle.net/4UMN3/5/

  • Nichts über es in docs. Vielleicht ein Fehler im Buch.
  • Warum würden Sie brauchen, um zu verwenden .attr() wenn Sie .css()?
  • Tut dies entspricht der zweiten bestätigten Fehler auf O 'Reilly' s Website?
  • Ja, die css() funktioniert Prima. Es ist nur weil ich bin, dieses Buch zu Lesen. Im entwickeln-tool, fand ich css="[object object]" wurde Hinzugefügt, um die span. Es scheint, dass der attr() kann nicht erkennen, die "css" - Attribut. <span css="[object object]" id="spanText" style="background-color: red">Dies ist ein test</span>
  • Gut zu finden, das ist das eine. Autor gepatzt hat.
  • Jup, das Buch ist definitiv falsch
  • Das Attribut ist nicht css, aber Stil, aber in der Tat, dies ist nicht die gleiche Sache, dass die Verwendung von css(). Wenn Sie es Lesen in einem Buch, das ist ein Fehler.
  • um sicher zu sein, auch der Autor übermittelt die Korrektur. 🙂

InformationsquelleAutor user3026964 | 2014-07-10
  1. 13

    Ersetzen:

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

    mit

    $("#spanText").attr('style',  'background-color:gray');
    InformationsquelleAutor Branimir Đurek
  2. 4

    Wahrscheinlich war es so gemeint

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

    Dies kann funktionieren, hat aber einige Probleme:

    • Es ist bevorzugt, zu ändern style - Eigenschaft anstelle der style Attribut.
    • Es ersetzt alle zuvor eingestellten inline-styles.

    Dann, wenn Sie jQuery verwenden, eine bessere Nutzung css Methode:

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

    Aber style Eigenschaft ist nützlich bei der vanilla-js:

    document.getElementById("spanText").style.backgroundColor = 'gray';
    InformationsquelleAutor Oriol
  3. 2

    Denke ich jQuery .attr() kann sich nur auf die Attribute des Elements hat.
    HTMLElements weiß nicht, ein Attribut namens "css" (im Sinne von <div css="something"></div>).

    Also, die korrekte Verwendung wäre

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

    Aber diese Ausgänge

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

    Ein Beispiel, das tatsächlich funktioniert, ist

    $("#spanText").attr("style","background-color:gray;");
    • Die .css() - Funktion versteht die Objekt-literal-syntax, die .attr() Methode nicht.
    • Ich habe nie behauptet etwas anderes. Ich wollte nur zeigen, warum die gezeigte syntax funktioniert nicht.
    • Ich war nur kommentieren, zum nutzen der Leser - nicht die Kritik an deiner Antwort.
    InformationsquelleAutor SVSchmidt
  4. 1

    JS:

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

    InformationsquelleAutor Kanomdook
  5. 0

    => die .css-Methode ändert das style-Attribut nicht auf "css" .

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

    => es gibt keine solche Sache wie css-Attribut im html -

    InformationsquelleAutor user117291
  6. 0

    du jQuery verwenden, so müssen Sie css und nicht attr, 'Ursache, die css hinzufügen Eigenschaft aber attr ersetzt alle Stil wenn existe !

    InformationsquelleAutor karim somai
  7. 0
    <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>
    InformationsquelleAutor jignasha
Schreibe einen Kommentar