CSS 클래스를 작동하기 위해 HTML5의 classList 속성을 사용하는 방법에 대한 자세한 설명-H5 튜토리얼-php.cn

CSS 클래스를 작동하기 위해 HTML5의 classList 속성을 사용하는 방법에 대한 자세한 설명

黄舟

풀어 주다： 2017-10-16 11:13:23

원래의

2530명이 탐색했습니다.

이 글에서는 주로 HTML5의 classList 속성을 사용하여 CSS 클래스를 운용하는 방법에 대한 자세한 설명을 소개하고 있는데, 편집자 입장에서는 꽤 좋다고 생각해서 지금 공유하고 참고용으로 올려드리겠습니다. 에디터를 따라가서 함께 살펴볼까요

서문

과거에는 js나 jquery, hasClass, addClass, RemoveClass 등의 일부 메소드를 사용하여 클래스 속성에 특정 클래스를 추가하거나 삭제해야 했습니다. 특정 스타일 변경을 달성하려면 요소가 필요하지만 여전히 약간 번거롭습니다.
h5의 새로운 classList를 사용하면 요소의 클래스 이름을 보다 편리하게 조작할 수 있습니다.

참고

classList는 호환성이 좋지 않아 IE10 이하의 IE 브라우저와 호환되지 않습니다.

예

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>classList</title>
    <style>
        .mystyle {
            width: 300px;
            height: 50px;
            background-color: red;
            color: white;
            font-size: 25px;
        }
    </style>
</head>
<body>

<p>点击按钮为p元素添加 "mystyle" 类。</p>
<button onclick="myFunction()">点我</button>
<p id="myp">
    我是一个 p 元素。
</p>
<script>
    function myFunction() {
        document.getElementById("myp").classList.add("mystyle");
    }
</script>

</body>
</html>

로그인 후 복사

새 클래스

add 메소드를 사용하여 페이지 요소에 하나 이상의 클래스를 추가할 수 있습니다.

document.getElementById("myp").classList.add("mystyle");

로그인 후 복사

클래스 삭제

사용 제거 메소드를 사용하면 단일 CSS 클래스를 제거할 수 있습니다.

document.getElementById("myp").classList.remove("mystyle");

로그인 후 복사

요소의 클래스 이름 전환

요소의 클래스 이름 전환. 토글 메소드를 사용하세요. 구문: 토글(class, true|false)

첫 번째 매개변수는 요소에서 제거할 클래스 이름이며 false를 반환합니다.

클래스 이름이 존재하지 않으면 클래스 이름이 요소에 추가되고 true가 반환됩니다.

두 번째는 선택적 매개변수로, 부울 값을 설정하면 클래스 이름 존재 여부에 관계없이 요소에 클래스를 강제로 추가하거나 제거할지 여부를 설정하는 데 사용됩니다. 예:

Remove a

document.getElementById("myp").classList.toggle("classToRemove", false);

로그인 후 복사

Add a

 document.getElementById("myp").classList.toggle("classToAdd", true);

로그인 후 복사

참고: 두 번째 매개변수는 Internet Explorer 또는 Opera 12 및 이전 버전에서는 지원되지 않습니다.

클래스가 포함되어 있는지 확인하세요

사용 클래스가 존재하는지 확인하고 부울 값을 반환하는 Contains 메서드입니다.

rreee

위 내용은 CSS 클래스를 작동하기 위해 HTML5의 classList 속성을 사용하는 방법에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!