jQuery 样式操作

1.css()

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

  • 返回样式属性：返回实际生效的属性值，相当于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>

2.操作类名

  • 添加类名 addClass(类名)：（会自动去重）
  • 移除类名 removeClass()：参数可选，如果不传，会移除所有类名
  • 切换类名 toggleClass(类名)
  • 判断是否存在类名 hasClass(类名)
<script>
    $(function(){
        var $p = $("p")
        // 添加类名
        $p.addClass("bigFont")
        // 添加重读的类名（自动忽略）
        $p.addClass("redFont")

        // 移除类名
        $p.removeClass("bigFont")
    })
</script>
posted @   ---空白---  阅读(282)  评论(0)  编辑  收藏  举报
编辑推荐：
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
阅读排行：
· Manus爆火，是硬核还是营销？
· 终于写完轮子一部分：tcp代理 了，记录一下
· 别再用vector＜bool＞了！Google高级工程师：这可能是STL最大的设计失误
· 单元测试从入门到精通
· 震惊！C++程序真的从main开始吗？99%的程序员都答错了
点击右上角即可分享
微信分享提示