【JavaScript】原生js中样式优先级、匿名函数以及循环四要素

完整js实例：https://github.com/MeichaoWen/JSInstancestyle 和 className 的优先级<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Do

meichaoWen

379人浏览 · 2020-12-30 23:21:53

meichaoWen · 2020-12-30 23:21:53 发布

完整js实例：https://github.com/MeichaoWen/JSInstance

style 和 className 的优先级

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #div1 {
            width: 300px;
            height: 200px;
        }
        .green{
            background: green;
        }
    </style>
</head>

<body>
    <input type="button" value="变红" onclick="toRed()">
    <input type="button" value="变绿" onclick="toGreen()">
    <div id="div1"></div>
    <hr>
    <ol>
        <li>style 操作和获取的都是行间样式</li>
        <li>style 比 className 的优先级要高</li>
    </ol>
    <script>
        function toRed(){
            var oDiv = document.getElementById('div1');
            oDiv.style.background = 'red'
            alert(oDiv.style.background)

        }
        function toGreen(){
            var oDiv = document.getElementById('div1');
            oDiv.className = 'green';
            alert(oDiv.style.background)
        }
    </script>
</body>

提取行间样式

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #div1 {
            width: 300px;
            height: 200px;
            background-color: #ccc;
            border: 1px solid #999;
        }
    </style>
</head>

<body>
    <div id="div1">HELLO WORLD</div>
    <hr>
    <ol>
        <li>window.onload 当页面加载完成时执行（相当于 jq 里的 ready 方法）</li>
        <li>onclick 等事件也相当于元素的属性，当然可以用 js 来操作，只不过 onclick 的值是函数</li>
        <li>函数有：匿名函数、命名函数</li>
    </ol>
    <script>
        function diagio(){
            alert('abc')
        }
        window.onload = function(){
            var oDiv = document.getElementById('div1');
            //方法一 匿名函数
            // oDiv.onclick = function(){
            //     alert(oDiv.innerHTML)
            // }
            //方法二 命名函数
            oDiv.onclick = diagio
        }
    </script>
</body>

循环语句的四要素

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .div1 div {
            width: 300px;
            height: 200px;
            background-color: #ccc;
            border: 1px solid #999;
            margin: 10px;
            float: left;
        }
        .div1{overflow: hidden;}

    </style>
</head>

<body>
    <div class="div1">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
    <hr>
    <ol>
        <li>循环成立的四个条件：1、初始化2、条件3、语句4、自增</li>
    </ol>
    <script>
        window.onload = function () {
            var oDiv = document.getElementsByTagName('div');
            for (var i = 0; i < oDiv.length; i++) {
                oDiv[i].style.background = 'red'
            }
        }
    </script>
</body>

开放原子开发者工作坊

开放原子开发者工作坊旨在鼓励更多人参与开源活动，与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动，如meetup、训练营等，主打技术交流，干货满满，真诚地邀请各位开发者共同参与！

更多推荐

第二届openEuler生态大会（中国·湖南）成功举办

10月30日，第二届openEuler生态大会（中国·湖南）成功举办。

开放原子开发者工作坊

“小满”安全车控操作系统正式在AtomGit开源

10月24日，由中国汽车工业协会指导，普华基础软件股份有限公司主办的“小满”安全车控操作系统开源发布会暨共建计划说明会成功举行。普华基础软件宣布将安全车控操作系统“小满”（简称“小满”）V24.10源代码正式在开放原子开源基金会（简称“基金会”）旗下AtomGit开源协作平台开源，并在AtomGit平