Utilise jQuery attr () pour définir «css»
Je lis le livre "jQuery Pocket Reference", O'Reilly, 2011 Dans la page 15, il est dit
'Par exemple, appeler attr ("css", {backgroundColor: "gray"}) est identique à appeler css ({backgroundColor: "gray"}).'
Mais je ne peux pas faire fonctionner l'attr ("css", {}). Mon code de test: http://jsfiddle.net/4UMN3/4/
$(function() {
$("#btnChangeColor").click(function () {
$("#spanText").attr("css", { backgroundColor: "gray" });
});
});
La méthode css () fonctionne très bien, http://jsfiddle.net/4UMN3/5/
Remplacer:
$("#spanText").attr("css", { backgroundColor: "gray" });
avec
$("#spanText").attr('style', 'background-color:gray');
Probablement, c'était censé être
$("#spanText").attr('style', 'background-color:gray');
Cela peut fonctionner, mais a quelques problèmes:
- Il est préférable de modifier la propriété
style
au lieu de l'attributstyle
. - Il remplacera tous les styles en ligne précédemment définis.
Ensuite, si vous utilisez jQuery, mieux vaut utiliser la méthode css
:
$("#spanText").css('background-color', 'gray');
Mais la propriété style
est utile dans Vanilla-js:
document.getElementById("spanText").style.backgroundColor = 'gray';
Je pense que .attr () de jQuery ne peut affecter que les attributs de l'élément. HTMLElements ne connaît pas un attribut appelé "css" (ce qui signifie <div css="something"></div>
).
Ainsi, l'utilisation correcte serait
$("#spanText").attr("style",{backgroundColor:"gray"});
Mais cela produit
<span id="spanText" style="[object Object]">This is a test</span>
Un exemple qui fonctionne réellement est
$("#spanText").attr("style","background-color:gray;");
$("#id").attr('style', 'color:red;cursor:pointer');
vous utilisez jQuery donc vous devez utiliser css et non attr, car css add property but attr remplacera tout le style if existe!
<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>
=> la méthode .css modifie l'attribut de style et non le "css".
$().att('style' , 'backgroundColor : gray');
=> il n'y a pas d'attribut css en html