专栏首页移动大前端JS示例06-document.getElementsByTagName

JS示例06-document.getElementsByTagName

一、知识要点

1、行间样式优先级高于class属性样式(设置过行间样式后,再设置属性样式则无效) 2、对同一个元素只采用一种属性控制方式(要不是行间样式,要不是class样式),不要混用

二、源码参考

<!DOCTYPE >
<html>

    <head>
        <title></title>
        <meta charset="utf-8">
        <style>
            .div1 {
                width: 200px;
                height: 100px;
                border: 1px solid #999;
                background: green;
            }
        </style>
        <script>
            window.onload = function() {
                var div1 = document.getElementsByTagName('div');
                for(var i = 0; i < div1.length; i++) {
                    div1[i].className = 'div1';
                }
            }
        </script>
    </head>

    <body>
        <div>

        </div>
        <div>

        </div>
        <div>

        </div>
        <div>

        </div>

    </body>

</html>

三、运行效果

image.png

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • JS示例34-鼠标跟随事件

    1、onmousemove 鼠标移动事件(要考虑页面滚动) 2、var X = ev.clientX; 3、var Y = ev.clientY + scr...

    专注APP开发
  • JS示例01-鼠标移入移出事件

    1、匿名函数 2、鼠标事件 3、document.getElementById() 4、window.onload 5、行间事件提取

    专注APP开发
  • JS示例04-属性控制方式二

    专注APP开发
  • bootstrap 左边栏菜单 常用样式

    <style> /* Custom Styles / ul.nav-tabs{ width: 140px; margin-top: 20px; ...

    用户5760343
  • 关于opacity、visibility、display属性的一道CSS面试题

    鼠标移入div,显示菜单ul,移出后隐藏菜单ul,只使用CSS,如何实现既有淡入淡出的效果,而又不影响其他元素,不产生回流?

    FEWY
  • Vue实践--指令

    1. v-text     v-text主要用来更新textContent,可以等同于JS的text属性。

    问天丶天问
  • css实现背景半透明文字不透明的效果

    祈澈菇凉
  • 页面引入CSS的四种方式及区别

    一个前端页面(原生)由HTML+CSS+JS+Image组成,页面效果由CSS负责,好的页面会吸引用户访问、停留。那么页面是如何靠css来达到效果的呢?下面说说...

    申霖
  • (5)打鸡儿教你Vue.js

    达达前端
  • css3转换(banner)

    天天_哥

扫码关注云+社区

领取腾讯云代金券