jQuery 동적 추가 삭제 CSS 스타일

11036 단어
jQuery 프레임워크는 두 개의 CSS 스타일 조작 방법을 제공합니다. 하나는 추가 스타일addClass이고, 하나는 스타일removeClass를 제거하는 것입니다. 다음은 작은 예를 통해 사용법을 설명합니다.
jQuery 동적 추가 제거 CSS 스타일
DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>jQuery      CSS  title>
    <script type="text/javascript" src="http://localhost/libs/jquery/2.1.1/jquery.min.js">script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#btn1").click(function() {
                $('#txtContent').addClass('red'); //    
            });
            $("#btn2").click(function() {
                $('#txtContent').removeClass('red'); //    
            });
            $("#btn3").click(function() {
                $('#txtContent').addClass('red weight family'); //      
            });
            $("#btn4").click(function() {
                $('#txtContent').removeClass('red weight'); //      
            });
            $("#btn5").click(function() {
                $('#txtContent').removeClass(); //      
            });
        });
    script>
    <style type="text/css">
        .default {
            font-size: 30px;
        }
        .red {
            color: red;
        }
        .weight {
            font-weight: bold;
        }
        .family {
            font-family: "    "
        }
    style>
head>
<body>
    <div id="txtContent" class="default">   !jQuery    !div><br />
    <input id="btn1" type="button" value="    " />
    <input id="btn2" type="button" value="    " />
    <input id="btn3" type="button" value="      " />
    <input id="btn4" type="button" value="      " />
    <input id="btn5" type="button" value="      " />
body>
html>

 
전재 대상:https://www.cnblogs.com/xiaocai0923/p/10520962.html

좋은 웹페이지 즐겨찾기