jQuery標籤操做

時間 2019-12-11

標籤 jquery 標籤欄目 JQuery 简体版

原文原文鏈接

樣式操做

樣式類操做

//添加指定的css類名
$('元素選擇器')addClass('類名');

//移除指定的css類名
removeClass();

//判斷樣式存不存在
hasClass();

////切換css類名,有則刪除,無則增長
toggleClass();

示例:
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        .c1{
            width: 300px;
            height: 300px;
            background-color: pink;
        }

        .c2{
            width: 100px;
            height: 100px;
            background-color: black;
        }
    </style>
</head>
<body>

<div class="c1"></div>

<script src="jQuery.js"></script>

<script>
    // 添加指定CSS類名(指定CSS類名替換元素選擇器指定的標籤內容)
    $('.c1').addClass('c2');

    //移除指定CSS類名
    $('.c1').removeClass('c2');

    //判斷指定CSS類名是否存在
    $('.c1').hasClass('c2');

    //查看指定CSS類名是否存在,有則刪除,無則添加
    $('.c1').toggleClass('c2');
</script>

</body>
</html>

示例

CSS樣式操做

原生js代碼:
    標籤.style.屬性 = '值';

jQuery代碼:
    單個css樣式
    $('元素選擇器').css('屬性','值');
    設置多個css樣式
    $('元素選擇器').css({'屬性':'值',屬性2:值2})

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div class="c1"></div>

<script src="jQuery.js"></script>

<script>
    // 設置單個css樣式類
    $('.c1').css('color','red');

    // 設置多個css樣式類
    $('.c1').css({'width':'300px','height':'300px','background-color':'yellow'});
</script>
</body>
</html>

示例

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。