原生JS添加Class类名删除类名开发者社区

原生JS添加Class类名删除类名

原创

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

document.getElementById("myDIV").classList.add("mystyle", "anotherClass", "thirdClass");

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

document.getElementById("myDIV").classList.remove("mystyle", "anotherClass", "thirdClass");

myDiv.classList.contains('myCssClass'); //return true or false

document.getElementsByTagName('body')[0].className = 'snow-container'; //设置为新的
document.getElementsByTagName('body')[0].className += 'snow-container'; //在原来的后面加这个
document.getElementsByTagName('body')[0].classList.add("snow-container"); //与第一个等价

<!DOCTYPE html>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .snow-container {
                background-color: red;
        </style>
        <script type="text/javascript">
            window.onload = function() {
                document.getElementsByTagName('body')[0].className = 'snow-container'; //设置为新的
                document.getElementsByTagName('body')[0].className += 'snow-container'; //在原来的后面加这个
                document.getElementsByTagName('body')[0].classList.add("snow-container"); //与第一个等价
        </script>
    </head>
    <body class="test">
    </body>
</html>

<!DOCTYPE html>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .snow-container {
                background-color: red;
        </style>
    </head>
    <body class="test">
    </body>
    <script type="text/javascript">
        document.getElementsByTagName('body')[0].className = 'snow-container'; //设置为新的
        document.getElementsByTagName('body')[0].className += 'snow-container'; //在原来的后面加这个
        document.getElementsByTagName('body')[0].classList.add("snow-container"); //与第一个等价

原生JS添加Class类名 删除类名

原生JS添加Class类名 删除类名

另一种给元素添加class属性

原生JS添加Class类名删除类名