JavaScript 样式操作

1.类名操作

  • class类名以字符串的形式存储到标签和Dom元素的属性中，标签属性为class，Dom元素属性为className，两个属性是均支持读取和修改，修改其中的一个会同步至另一个属性
  • className属性：拿到Dom后，通过这个属性来读取和修改
<body>
    <div id="app"> 
        <div id="box" class="box text-align">测试样式类名</div>
    </div>
</body>

<script>
    var box = document.querySelector("#box")
    //读取并打印
    console.log(box.className) //box text-align
    //设置className
    box.className = "box text-align text-success"
</script>
  • 标签属性：通过getAtrribute()/setAtrribute()方法直接读取和修改
<script>
    var box = document.querySelector("#box")
    console.log(box.getAttribute("class")) //box text-align

    box.setAttribute("class","box text-align text-success")
</script>
  • 缺点：样式类以字符串形式读取和设置，但是样式类生效时时彼此独立的，不方便操作

2.classList 属性

  • 这个属性以数组形式返回元素css类名，且支持对数组元素的怎删改查
  • 注意：这个是HTML5里面新增的属性，旧版本浏览器不支持
<body>
    <div id="box" class="box text-align">测试样式类名</div>
</body>

<script>
    var box = document.querySelector("#box")
    //一个带value属性的数组
    //DOMTokenList(2) ['box', 'text-align', value: 'box text-align']
    console.log(box.classList)
</script>
  • 属性方法add(class1, class2, ...)：在元素中添加一个或多个类名（已经存在的类名不会重复添加，能自动去重）
<script>
    var box = document.querySelector("#box")
    //添加一个类 
    box.classList.add('text-success')
    ////DOMTokenList(3) ['box', 'text-align', 'text-success', value: 'box text-align']
    console.log(box.classList)
</script>
  • 属性方法remove(class1, class2, ...)：移除元素中一个或多个类名
<script>
    var box = document.querySelector("#box")
    //移除一个类 
    box.classList.remove('text-align')
    ////DOMTokenList(1) ['box']
    console.log(box.classList)
</script>
  • 属性方法toggle()：切换某个类名，如果这个类名已经存在就把他移除，如果类名不存在则添加这个类名
<script>
    var box = document.querySelector("#box")
    //切换一个类 
    box.classList.toggle('text-align')
    ////DOMTokenList(1) ['box']
    console.log(box.classList)
    //切换一个类 
    box.classList.toggle('text-align')
    ////DOMTokenList(2) ['box','text-align']
    console.log(box.classList)
</script>
  • 属性方法contains()：判断元素是否含有指定的css类名
<script>
    var box = document.querySelector("#box")
    // true
    console.log(box.classList.contains("box"))
    // false
    console.log(box.classList.contains("text-success"))
</script>
  • 属性方法replace()：替换某个css类名
<script>
    var box = document.querySelector("#box")
    // 替换类名
    box.classList.replace("text-align","left-align")
    //DOMTokenList(2) ['box', 'left-align', value: 'box left-align']
    console.log(box.classList)
</script>

3.内联样式

  • 通过Dom元素的style属性进行操作
<script>
    var box = document.querySelector("#box")
    // 替换类名
    box.style.color = "red"
</script>
  • 如果css属性带有 "-" ，设置时使用驼峰法或者数组语法
<script>
    var box = document.querySelector("#box")
    // 驼峰法 background-color
    box.style.backgroundColor = "red"
    //数组语法
    box.style["box-sizing"] = "border-box"
</script>
posted @   ---空白---  阅读(902)  评论(0)  编辑  收藏  举报
编辑推荐：
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
阅读排行：
· Manus爆火，是硬核还是营销？
· 终于写完轮子一部分：tcp代理 了，记录一下
· 别再用vector＜bool＞了！Google高级工程师：这可能是STL最大的设计失误
· 单元测试从入门到精通
· 震惊！C++程序真的从main开始吗？99%的程序员都答错了
点击右上角即可分享
微信分享提示