jQuery CSS样式操作及案例

$().css(name)         获取
$().css(name,value)   设置
$().css(json对象)      同时修改多个css样式

详细的请参考下方源码中的注释
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="jquery-3.1.1.min.js"></script>

    <script>
        function f1() {
            /*
            * $().css(name)         获取
            * $().css(name,value)   设置
            * $().css(json对象)      同时修改多个css样式
            * */

            //获取
            //这儿虽然是用.n1进行div识别,但不并只是获取.n1的的样式,而是获取.n1所在的整个div自己的css样式
            //一个页面.n1用了多次,则只提取第一个.n1出现在div样式,其它的忽略。
            //border无法直接获取,因为border是复合样式,只能获取border的具体样式,共有:
            //border-top-style/border-top-color/border-top-width
            //border-right-style/border-right-color/border-right-width
            //border-bottom-style/border-bottom-color/border-bottom-width
            //border-left-style/border-left-color/border-left-width
            //js原生dom只能获得行内样式,而jQuery封装后的功能要比js强很多
            console.log($('div.n1').css('font-size'));

            //设置(会被设置为行内样式)
            //有则修改,无则添加
            $('div.n2').css('width','300px');
            $('div.n2').css('height','100px');
            $('div.n2').css('background','lightgreen');
            //复合样式可直接设置
            $('div.n2').css('border','5px solid yello');

            //通过json对象同时修改多个
            //如果样式名中含有 "-" 这种符号,则需要加''处理,其它的不需要
            $('div.n3').css({'font-size':'30px',color:'purple'});

        }
    </script>
    <style>
        .n1 { width:300px; height:100px; background:lightblue;}
    </style>
</head>
<body>
<h2>CSS样式操作</h2>
<div class="n1" style="color:#ff0000;">简单易用的样式操作</div><br><br>
<div class="n2" style="color:#0000ff; font-size:20px;">轻轻松松学会</div><br><br>
<div class="n3">同时进行多个样式操作</div><br><br>
<input type="button" value="触发" onclick="f1()";>
</body>
</html>

评论

大侠名号:   验证码: 点击我更换图片  

修远兮

在这里记录每一点自己需要的知识

添加创始人微信,一起交流心得

推荐文章RECOMMEND