>  기사  >  웹 프론트엔드  >  jquery css()와 attr()의 차이점은 무엇입니까?

jquery css()와 attr()의 차이점은 무엇입니까?

青灯夜游
青灯夜游원래의
2021-05-12 17:07:572880검색

차이점: attr()은 주로 img의 src 속성 및 alt 속성, 링크의 href 속성 등과 같은 요소(Html ​​태그 관련) 속성에 대해 작동하는 반면 css()는 속성을 수정합니다. 스타일의 속성인 스타일(스타일 관련)입니다.

jquery css()와 attr()의 차이점은 무엇입니까?

이 튜토리얼의 운영 환경: Windows 7 시스템, jquery 버전 1.10.0, Dell G3 컴퓨터.

jquery에는 attr()과 css()라는 두 가지 메소드가 있습니다.

attr은 attribute의 약어로 label 속성을 의미합니다. CSS는 스타일, 즉 요소의 스타일을 의미합니다.

jquery attr() 메소드

attr() 메소드는 선택한 요소의 속성과 값을 설정하거나 반환합니다.

이 메서드를 사용하여 속성 값을 반환하면 일치하는 첫 번째 요소의 값이 반환됩니다.

이 방법을 사용하여 속성 값을 설정하면 일치하는 요소에 대해 하나 이상의 속성/값 쌍이 설정됩니다.

Syntax

속성 값 반환:

$(selector).attr(attribute)

속성 및 값 설정:

$(selector).attr(attribute,value)

attribute: 속성의 이름을 지정합니다.

value: 속성의 값을 지정합니다.

jquery css() 메서드

css() 메서드는 일치하는 요소의 하나 이상의 스타일 속성을 반환하거나 설정합니다.

첫 번째로 일치하는 요소의 CSS 속성 값을 반환합니다.

참고: 값을 반환하는 데 사용되는 약식 CSS 속성(예: "배경" 및 "테두리")은 지원되지 않습니다.

$(selector).css(name)

이름: 필수입니다. CSS 속성의 이름을 지정합니다. 이 매개변수에는 모든 CSS 속성이 포함될 수 있습니다. 예를 들어 "색상"입니다.

jquery의 attr()과 css()의 차이점

attr()은 요소의 속성과 값(Html ​​태그 관련)을 가져오거나 수정하는 것입니다. 요소 속성의 스타일을 가져오거나 수정합니다(스타일 관련).

attr()은 주로 img의 src 속성과 alt 속성, 링크의 href 속성 등과 같은 요소의 속성에 대해 작동합니다.

css()는 스타일의 속성, 즉 스타일의 속성.

전자는 jquery css()와 attr()의 차이점은 무엇입니까?의 src 속성, 의 href 속성, 의 title 속성을 수정할 수 있습니다. 그러나 후자는 작동하지 않습니다. 스타일 관련 기능만 수정할 수 있습니다.

따라서 후자는 전자의 하위 집합이며 스타일의 특정 속성에만 적용됩니다.

예:

HTML

<div style="color:red;font-weight:bold;" id="a" data-id="1" class="mystyle">Hello</div>

Javascript

<script type="text/javascript">
$(function() {
//css()
var color = $("#a").css("color"); //只有一个参数时,是获取div#a的color,返回red
$("#a").css("color", "blue"); //两个参数时,是设置对应的 样式属性,这里是这只文本color为blue
// $("#a").css({"color":"blue","fontWeight":"normal"});//也支持对象形式进行设置样式
//attr()
//获取div#a上面的data-id属性的值;当然,style,class,id这三个都可以获取到,因为这些都是Html元素的 属性
var id = $("#a").attr("data-id");
//$("#a").attr("data-id",2);//设置div#a上面的data-id属性为2,
                //假如是一个不存在的属性,使用这个代码,就会添加这个属性到匹配到的元素上面 
               //如$("#a").attr("data-width","100px");,使用这个,div#aHtml元素上面就会新增一个data-width的属性
});
</script>

Summary

css() 메소드는 스타일 속성(스타일 관련)을 가져오거나 수정하는 것입니다. )을 얻는 것입니다 / 요소의 속성을 수정하는 방법(Html ​​태그 관련)

attr() 및 css() 스타일 작업은 모두 인라인 스타일용입니다.

style도 요소의 속성이고 attr()도 이에 대해 연산을 수행할 수 있으므로 기능적으로 CSS()는 attr()의 하위 집합으로 간주될 수 있습니다.

attr() 작업은 문자열을 반환하고, css() 작업은 객체를 반환합니다.

추천 관련 비디오 튜토리얼:

jQuery Tutorial

(비디오)

위 내용은 jquery css()와 attr()의 차이점은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.