作者
JavaScript 是一种轻量级的脚本语言。所谓“脚本语言”(script language),指的是它不具备开发操作系统的能力,而是只用来编写控制其他大型应用程序(比如浏览器)的“脚本”。 JavaScript 只合适嵌入更大型的应用程序环境,去调用宿主环境提供的底层 API。 目前,已经嵌入 JavaScript 的宿主环境有多种,最常见的环境就是浏览器,另外还有服务器环境,也就是 Node 项目。
目录
getComputedStyle的用法
落霞与孤鹜齐飞 6月29日 15 0 0 15 0 0

如何获取未设置width height的元素的宽高值呢?这个问题时而会在项目中遇到,例如

<body>
    <div id="test">所在盒子的宽高是多少呢</div>
    <script>
        const test = document.getElementById('test')
        console.log(test.width, test.height);
        console.log(test.style.width, test.style.height);
    </script>
</body>

意料之中,分别输出 undefined undefined ‘’ ‘’

并没有获取到元素的宽高,那么getComputedStyle就排上用场了。

  • 基本用法 window.getComputedStyle(targetEle, [pseudoEle])
    • targetEle:必选 目标元素
    • pseudoEle:可选 伪元素(:first-letter :befire :after … )
  • 返回值: 元素的所有CSS属性的值
  • 兼容性:现代主流浏览器都兼容
<body>
    <div id="test">所在盒子的宽高是多少呢</div>
    <script>
        const test = document.getElementById('test')
        const sye = window.getComputedStyle(test)

        console.log(
            sye.width, 
            sye.height,
            sye.color,
            sye.backgroundColor,
            sye.fontWeight
        );
    </script>
</body>

依次打印出:1904px 21px rgb(0, 0, 0) rgba(0, 0, 0, 0) 400

如果设置一些css

<style>
        #test {
            width: 500px;
            font-weight: bold;
        }
        div {
            background: #def;
        }
    </style>
</head>
<body>
    <div id="test" style="color: #333;">所在盒子的宽高是多少呢</div>
    <script>
        const test = document.getElementById('test')
        const sye = window.getComputedStyle(test)

        console.log(
            sye.width, 
            sye.height,
            sye.color,
            sye.backgroundColor,
            sye.fontWeight
        );
    </script>

现在则打印出 500px 21px rgb(51, 51, 51) rgb(221, 238, 255) 700

需要注意的是颜色会被转换成RGB或者RGBA模式

扫码分享到移动端
0 条评论
快来写一写读后感吧~
参与评论互动
登录即可参与评论互动哦