首页 > Web开发 > 详细

jQuery 样式操作

时间:2019-10-04 18:04:53      阅读:62      评论:0      收藏:0      [点我收藏+]

1.css()设置样式

css()操作的是元素的内联样式
如果要同时操作多个属性 ,就传入一个 对象

<script>
    $(function(){
        var $p = $("p")
        // 操作单个样式
        $p.css("color","red")
        // 操作多个样式(对象语法)
        $p.css({
            "font-size":"30px",
            "text-align":"center"    
        })
    })
</script>

技术分享图片

2.css()返回样式属性

返回实际生效的属性值,相当于getComputedStyle(element, false)[attr])

<body>
    <p style="color: red; font-size: 30px; text-align: center;">鱼和熊掌不可兼得,但单身和穷可以!</p>
</body>
<script>
    $(function(){
        var $p = $("p")
        var color = $p.css("color")
        var fontSize = $p.css("font-size")
        console.log(color) //rgb(255, 0, 0)
        console.log(fontSize) //30px
    })
</script>

3.操作类名

添加类名 addClass(类名)
移除类名 removeClass(类名)

注意:添加类名时会自动忽略已经存在的类名(会自动去重)

<script>
    $(function(){
        var $p = $("p")
        // 添加类名
        $p.addClass("bigFont")
        // 添加重读的类名(自动忽略)
        $p.addClass("redFont")

        // 移除类名
        $p.removeClass("bigFont")
    })
</script>

jQuery 样式操作

原文:https://www.cnblogs.com/OrochiZ-/p/11622579.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!