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>

示例