专栏首页移动大前端JS示例17-如何取非行间样式

JS示例17-如何取非行间样式

一、知识要点

1、函数的返回参数 2、函数的封装 3、如何解决取非行间样式兼容性问题

二、源码参考

<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <title>无标题文档</title>
    <style>
        #div1 {
            width: 200px;
            height: 200px;
            background: red;
        }
    </style>
    <script>
        function getStyle(obj, name) {
            if (obj.currentStyle) {
                return obj.currentStyle[name];
            } else {
                return getComputedStyle(obj, false)[name];
            }
        }

        window.onload = function () {
            var oDiv = document.getElementById('div1');
            alert(getStyle(oDiv, 'backgroundColor')); // 无法获取复合样式,比如backgrund
        };
    </script>
</head>

<body>
    <div id="div1">
    </div>
</body>

</html>

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • JS示例04-属性控制方式二

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

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

    专注APP开发
  • JS示例06-document.getElementsByTagName

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

    专注APP开发
  • 24. 企业级开发基础5:面向对象特征(封装)

    在我们程序开发过程中,定义好类型之后就可以通过类型来创建对象 如:我们定义一个中华人民共和国公民的类型

    大牧莫邪
  • 第67天:面向对象的声明、封装

    半指温柔乐
  • 前端面试送命题-JS三座大山

    首先创造空的对象,再让this指向这个对象,通过this.name进行赋值,最终返回this,这其实也是new 一个对象的过程。

    用户1093975
  • JS 中 this上下文对象的使用方式

    JavaScript 有一套完全不同于其它语言的对 this 的处理机制。 在五种不同的情况下 ,this 指向的各不相同。

    书童小二
  • python3 类、对象的基础概念

    用户2398817
  • c语言基础学习11_项目实战:IDE(集成开发环境)

    ============================================================================= ==...

    黑泽君
  • python flask web开发实战 页面消息提醒 常用

    from flask import Flask, render_template, session, redirect, url_for, flash @ap...

    用户5760343

扫码关注云+社区

领取腾讯云代金券

玩转腾讯云 有奖征文活动