Der Unterschied zwischen den Methoden css() und attr() in jQuery

Dieser Artikel stellt hauptsächlich den Unterschied zwischen den Methoden css() und attr() in jQuery vor. Jetzt kann ich ihn mit Ihnen teilen

Methodeneinführung :

css():

html-Code:

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

jQuery-Code:

<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():

HTML-Code:

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

jQuery-Code:

<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() kann auch den Stil festlegen:

html Code:

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

jQuery-Code:

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

Zusammenfassung:

• css() Methode ist, um/ zu erhalten/ modifizieren Die Methode für Stilattribute (im Zusammenhang mit Stil);

• attr() ist die Methode zum Abrufen/Ändern der Attribute von Elementen (im Zusammenhang mit HTML-Tags) ;

• attr() und css() wirken sich auf den Stil aus, beide für Inline-Stile.

• style ist auch ein Attribut des Elements attr() kann es auch bearbeiten, also in Bezug auf die Funktion, css() kann als Teilmenge von attr() betrachtet werden. Die Operation

• attr() gibt einen String zurück, und die Operation css() gibt ein Objekt zurück.

Erweiterung:

prop()-Methode ist eine Methode zum Abrufen/Ändern der eigenen Attribute des Elements, mit Ausnahme benutzerdefinierter Eigenschaften.
HTML-Code:

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

jQuery-Code:

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

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Lernen aller hilfreich ist Achtung auf die chinesische PHP-Website!

Verwandte Empfehlungen:

Methode zum Konvertieren von JS-Strings in Zahlen

Übergabe von Parametern durch Parameter des Vue-Attributs $route

Erfahren Sie mehr über Rückrufe von jQuery-Quellcode

Das obige ist der detaillierte Inhalt vonDer Unterschied zwischen den Methoden css() und attr() in jQuery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!