HTML5选择器

最新推荐文章于 2023-10-07 22:30:05 发布

只看五分钟佩奇的小姑姑

最新推荐文章于 2023-10-07 22:30:05 发布

阅读量388

点赞数

文章标签： html5 浏览器

本文链接：https://blog.csdn.net/Aloe_904/article/details/78421098

版权

前端的尘封往事专栏收录该内容

29 篇文章 0 订阅

订阅专栏

http://www.caniuse.com/#index

HTML5新特性的浏览器支持情况

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选择器</title>

    <script type="text/javascript">
        window.onload=function(){
            //var oDiv=document.querySelector(".box")
            //oDiv.style.background='red';//只能改变div1的样式

            // var oDiv=document.querySelectorAll(".box");
            // alert(oDiv.length);//获取的一组值，要想改变每个元素样式就得用循环

            // var oDiv=document.getElementsByClassName('box');//不加点
            //  alert(oDiv.length);//获取的一组值

            var oDiv=document.getElementById('div3');
            alert(oDiv.classList)//box1 box2 box3,类似与数组的对象
            alert(oDiv.classList.length);//3
            oDiv.classList.add('box4')//添加class名为box4 
            oDiv.classList.remove('box4')//删除class名为box4


        }
    </script>

</head>
<body>
    <div id="div1" class=".box">div1</div>
    <div class=".box">div2</div>
    <div id="div3" class="box1 box2 box3">div3</div>
</body>
</html>


----------


<!-- 
querySelector():选择元素，类似于jQuery，元素名，ID名，类名，但只能选择一组中的第一个元素

getElementsByClassName():通过class名，不加点，获取一组值

classList:获取class列表属性
          length：class的长度
          add(): 添加class的方法
          remove():删除class的方法
          toggle():切换class的方法，括号里的class若存在则执行删除，如果不存在则执行添加


 -->

只看五分钟佩奇的小姑姑

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5选择器

http://www.caniuse.com/#indexHTML5新特性的浏览器支持情况<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>选择器</title> <script type="text/javascript"> window.onload=function(
复制链接

扫一扫