专栏首页eadelaHTML5-Classlist样式操作

HTML5-Classlist样式操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .red{
            color:red
        }
        .green{
            color: green;
        }
        .blue{
            color: blue;
        }
        .underline{
            text-decoration: underline;
        }
    </style>
</head>
<body>
<ul>
    <li class="red">前端与移动开发</li>
    <li class="blue">java</li>
    <li>javascript</li>
    <li class="red">c++</li>
</ul>
<input type="button" value="为第一个li元素添加样式" id="add">
<input type="button" value="为第二个li元素移除样式" id="remove">
<input type="button" value="为第三个li元素切换样式" id="toggle">
<input type="button" value="判断第四个li元素是否包含某个样式" id="contain">
<script>
    window.onload=function(){
        /*add:为元素添加指定名称的样式.一次只能添加一个样式*/
        document.querySelector("#add").onclick=function(){
            /*classList:当前元素的所有样式列表-数组*/
            document.querySelector("li").classList.add("red");
            document.querySelector("li").classList.add("underline");
            //document.querySelector("li").className="red underline"
            /*获取样式*/
            var result=document.querySelector("li").classList.item(2);
            console.log(result);
        }

        /*remove:为元素移除指定名称的样式(不是移除class属性),一次也只能移除一个*/
        document.querySelector("#remove").onclick=function(){
            document.querySelector(".blue").classList.remove("blue");
        }

        /*toggle:切换元素的样式:如果元素之前没有指定名称的样式则添加。如果有则移除*/
        document.querySelector("#toggle").onclick=function(){
            document.querySelectorAll("li")[2].classList.toggle("green");
        }

        /*contains:判断元素是否包含指定名称的样式,返回true/false*/
        document.querySelector("#contain").onclick=function(){
            var isContain=document.querySelectorAll("li")[3].classList.contains("red");
            console.log(isContain);
        }
    }
</script>
</body>
</html>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • CSS基础--属性选择器、伪类选择器

    eadela
  • jQuery基础--选择器

    jQuery选择器是jQuery为我们提供的一组方法,让我们更加方便的获取到页面中的元素。注意:jQuery选择器返回的是jQuery对象。

    eadela
  • jQuery基础--基本概念

    js库:把一些常用到的方法写到一个单独的js文件,使用的时候直接去引用这js文件就可以了。(animate.js、common.js)

    eadela
  • 导航页下拉菜单

    1、static :默认值 没有定位 元素出现在正常的流中(忽略top,bottom,left,right或者z-index声明)。

    week
  • a:伪类

    贵哥的编程之路
  • 第72天:jQuery实现下拉菜单

    1、块元素居中:给块元素本身设置:margin:0 auto;,块元素必须设置宽度

    半指温柔乐
  • HTML5 div css3漂亮的侧边菜单栏

    Java学习123
  • jquery顶部固定层下拉导航

    最近有人在论坛里讨论怎么制作导航菜单!我关注了一下,这里就写了一个简单的demo。供大家参考。代码如下:

    业余草
  • 作业-原生js完成轮播图与悬停

    代码亮点:增加图片时,你只需要再加一个li就可以了。不需要改动其他任何代码。

    乐心湖
  • 一篇文章带你了解CSS 分页实例

    如果点击当前页,可以使用 .active 来设置当期页样式,鼠标悬停可以使用 :hover 选择器来修改样式:

    前端皮皮

扫码关注云+社区

领取腾讯云代金券