La différence entre les méthodes css() et attr() dans jQuery

Cet article présente principalement la différence entre les méthodes css() et attr() dans jQuery. Il a une certaine valeur de référence. Maintenant, je le partage avec vous. Les amis dans le besoin peuvent se référer à l'introduction de la méthode

. :

css():

code html :

<p class="box" id="box" style="width: 300px;height: 100px;background-color: yellow"></p>

code jQuery :

<script type="text/javascript">
    var oBox = $("#box");
    // 只有一个参数时,是获取对应样式的值
    console.log($("#box").css("width"));// 返回300px

    // 两个参数时,是设置对应的样式属性
    oBox.css("width", "400");
    console.log($("#box").css("width"));// 返回400px
    // 也支持对象形式进行设置样式
    oBox.css({
        "width": 500,
        "height": "500px",
        "background-color": "yellow"
    });
</script>

attr ():

code html :

<p class="box" id="box" style="width: 300px;height: 100px;background-color: yellow"></p>

code jQuery :

<script type="text/javascript">
    var oBox = $("#box");
    var oImg = $("#pic");
    // 一个参数为读取对应的属性，属性的都可以读取，包括style
    console.log(oImg.attr("id"));// 返回pic
    console.log(oImg.attr("src"));// 返回images/0.jpg

    // 设置p(oBox)上面的width属性为400
    console.log(oBox.attr("width", "400"));
    // 假如是一个不存在的属性，使用这个代码，就会添加这个属性到匹配到的元素上面 ，如oBox.attr("data-width","100px");,使用这个，oBox的Html元素上面就会新增一个data-width的属性 
</script>

attr() peut également définir le style :

Code HTML :

<p class="box" id="box" style="width: 300px;height: 100px;background-color: yellow"></p>

Code jQuery :

<script type="text/javascript">
    var oBox = $("#box");
    //这里有一个重置了行内的style样式的现象，background-color不再有效
    oBox.attr("style", "width: 310px;height: 110px");
</script>

Résumé :

• <🎜 La méthode >css() consiste à obtenir/modifier les attributs de style (liés au style) ;

• attr() consiste à obtenir/modifier les attributs des éléments ; (lié aux balises HTML);

• attr() et css() opèrent sur le style tous deux pour les styles en ligne.

• style est également un attribut de l'élément

  attr() peut également opérer dessus, donc en termes de fonction, css() peut être considéré comme Est un sous-ensemble de attr(). L'opération

• attr() renvoie une chaîne et l'opération css() renvoie un objet. La méthode

Extension :

prop() est une méthode pour obtenir/modifier les propres attributs de l'élément, à l'exclusion des propriétés personnalisées. Code HTML :

<p class="box" id="box" style="width: 300px;height: 100px;background-color: yellow"></p>

Code jQuery :

<script type="text/javascript">
    var oBox = $("#box");
    console.log(oBox.prop("style"));// 返回的是所有style的属性和值 包括已经设置的和未设置的
</script>

Ce qui précède est l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun pour en savoir plus. contenu, veuillez faire attention au site Web chinois PHP !

Recommandations associées :

Méthode de conversion d'une chaîne JS en nombre

Passer des paramètres via les paramètres de l'attribut Vue $route

Apprentissage des rappels du code source jQuery

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!