jQuery에서 css()와 attr() 메소드의 차이점

이 글은 주로 jQuery의 css()와 attr() 메소드의 차이점을 소개합니다. 이제 이를 공유합니다. 도움이 필요한 친구들이 참고할 수 있습니다.

css( ) :

html 코드:

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

j쿼리 코드:

<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 코드:

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

j쿼리 코드:

<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()도 스타일을 설정할 수 있습니다:

html 코드:

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

j쿼리 코드:

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

요약:

• css()

  메서드는 스타일 속성(스타일 관련)을 가져오거나 수정하는 것입니다.

• attr()

  은/ 요소의 속성을 수정하는 메서드(Html ​​태그 관련)

• attr()

  및 css()는 인라인 스타일 모두에 대해 작동합니다.

style도 요소의 속성이고
• attr()

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

• attr()

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

Extension:

prop()

메소드는 사용자 정의 속성을 제외한 요소 자체 속성을 가져오거나 수정하는 메소드입니다. html 코드:

8ff673b3b5d119a5bd586bd83c45c70b94b3e26ee717c64999d7867364b1b4a3

jQuery 코드:

8019067d09615e43c7904885b5246f0a
    var oBox = $("#box");
    console.log(oBox.prop("style"));// 返回的是所有style的属性和值 包括已经设置的和未设置的
2cacc6d41bbb37262a98f745aa00fbf0

위 내용은 모두의 학습에 도움이 되기를 바랍니다. 더 많은 관련 내용은 PHP 중국어 홈페이지를 참고해주세요!

관련 권장 사항:

JS 문자열을 숫자로 변환하는 방법

Vue 속성 $route

jQuery 소스 코드의 콜백에 대해 알아보기

위 내용은 jQuery에서 css()와 attr() 메소드의 차이점의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!