<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>脚本操作CSS</title>

        <style type="text/css">

            *{margin:0;border: none;padding: 0;}

            .box{

                position: relative;

                width:100%;

                height: 50px;

                background-color: #CCCCCC;

            }

            .box:before{

                content:'';

                position: absolute;

                left: 0;

                top: 0;

                width:100%;

                height: 10px;

                background-color: lightblue;

            }

            .shadow{

                    box-shadow: 6px 6px 6px rgba(0,0,0,0.7);

            }

            .btns{

                    position: relative;

                    margin-top: 30px;

                    width: 100%;

            }

        </style>

        <script>

            document.addEventListener('DOMContentLoaded',function(e){

                    // 读CSS属性

                    document.querySelector('#readCss').addEventListener('click',function(e){

                    let ele = document.querySelector('#box');

                    let styles = document.defaultView.getComputedStyle(ele,null);

                    let afterStyles = window.getComputedStyle(ele,':before');

                    console.log('div样式',`宽:${styles.width},高:${styles.height}`);

                    console.log(':before样式',`宽:${afterStyles.width},高:${afterStyles.height}`);

                },false);

                // 写CSS属性

                document.querySelector('#writeCss').addEventListener('click',function(e){

                    document.querySelector('#box').style.height = '100px';

                },false);

                // 增加CSS类

                document.querySelector('#addClass').addEventListener('click',function(e){

                    document.querySelector('#box').classList.add('shadow');

                },false);

                // 删除CSS类

                document.querySelector('#removeClass').addEventListener('click',function(e){

                    document.querySelector('#box').classList.remove('shadow');

                },false);

                // 切换CSS类

                document.querySelector('#toggleClass').addEventListener('click',function(e){

                    document.querySelector('#box').classList.toggle('shadow');

                },false);

            },false);

        </script>

    </head>

    <body>

        <div id="box" class="box">

        </div>

        <p class="btns">

                <a id="readCss">读CSS属性</a>

            <a id="writeCss">写CSS属性</a>

            <a id="addClass">增加CSS类</a>

            <a id="removeClass">删除CSS类</a>

            <a id="toggleClass">切换CSS类</a>

        </p>

    </body>

</html>

Javascript读写CSS属性的更多相关文章

  1. JavaScript修改CSS属性的实例代码

    用原生的javascript修改CSS属性的方法. 用JavaScript修改CSS属性 只有写原生的javascript了.  1.用JS修改标签的 class 属性值:  class 属性是在标签 ...

  2. javascript操作html元素CSS属性

    下面先记录一下JS控制CSS所使用的方法. 1.使用javascript更改某个css class的属性... <style type="text/css"> .ori ...

  3. JavaScript如何获取css属性

    原文:JavaScript如何获取css属性 在web开发中,很多时候我们需要用JavaScript对网页的样式进行修改,接下来,我们就来看一下我们该如何访问css属性,针对不同情况及案例来进行分析. ...

  4. 使用javascript和css模拟帧动画的几种方法浅析

    我们平时在开发前端页面的时候,经常会播放一段帧序列.这段帧序列就像gif图片那样,反复循环播放.那大家可能会说,直接用gif图片就好了,干嘛还去模拟呢?那是因为要做得更加灵活,我们要做到以下几点: 1 ...

  5. CSS和JavaScript标签style属性对照表

    CSS和JavaScript标签style属性对照表一般情况是把"-"去掉,后面字母用大写. CSS语法 (不区分大小写) JavaScript语法 (区分大小写) border ...

  6. Javascript检测浏览器对CSS属性的支持 /* supports */

    //检测浏览器对CSS属性的支持 supports = (function() { var div = document.createElement('div'), vendors = 'Khtml ...

  7. 原生JavaScript判断浏览器对CSS属性是否支持

    /*判断浏览器是否支持某个css属性*/ function SupportCss(attrName){ var i=0, arr = SupportCss.opt.aBrowser, eleStyle ...

  8. 用原生JS读写CSS样式的方法总结

    为了日后方便查询,本人翻阅了一些资料总结了以下方法,仅限原生JS,如有不对的地方欢迎指出!只求大家看完觉得有学到点什么就OK了!   一.可以通过DOM节点对象的style对象(即CSSStyleDe ...

  9. 详解 javascript中offsetleft属性的用法（转）

    详解 javascript中offsetleft属性的用法 转载  2015-11-11   投稿:mrr    我要评论 本章节通过代码实例介绍一下offsetleft属性的用法,需要的朋友可以做一 ...

随机推荐

  1. HDU 2548 A strange lift

    A strange lift Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)To ...

  2. 杂项-frame：Rails框架

    ylbtech-杂项-frame:Rails框架 Rails框架首次提出是在2004年7月,它的研发者是26岁的丹麦人David Heinemeier Hansson.不同于已有复杂的Web 开发框架 ...

  3. 初次从eclipse转到intellij idea上的一些经验

    如果出现:mvn 请使用 -source 7 或更高版本以启用 diamond 运算符 这种问题 pom.xml里 <build>标签里面 需要加入这么一段 <plugins> ...

  4. CA证书认证单向和双向的区别

     我觉得最科学的应该是,单向的,每次客户端发两把锁住的东西给服务端,服务端解密两次,服务端用客户端发来的对称密钥加密数据,发送给客户端,客户端只需解密一次,然后客户端每次修改随机密码,传给服务端,服务 ...

  5. FDD vs TDD

    双工方式 FDD vs TDD  频分双工(FDD) 收发信各占用一个频率. 优点是收.发信号同时进行,时延小,技术成熟,缺点是设备成本高.  时分双工(TDD) 收发信使用同一个频率,但使用不同 ...

  6. 关于input=file的用法

    <input type="file"/>这个东西是用来上传图片用的. 1,但是存在一下问题但是在在各个浏览器下的显示是不一样的 IE下: IE之外的浏览器: 2.如果不 ...

  7. 开发组件：Systemd

    Systemd 入门教程:命令篇 http://www.ruanyifeng.com/blog/2016/03/systemd-tutorial-commands.html

  8. java 执行shell命令

    Runtime.getRuntime().exec http://blog.csdn.net/heyetina/article/details/6555746

  9. 包与常用模块：time，sys。

    一  包的初识: 首先包在pycharm中的表现形式为packa文件夹:在python3种那么我们创建一个packa时会发现下边会自动跟一个—init—.py文件 包的定义:包就是一个包含有——ini ...

  10. Hadoop使用场景

    Hadoop使用场景: 大数据量存储:分布式存储 日志处理: Hadoop擅长这个 海量计算: 并行计算 ETL:数据抽取到oracle.mysql.DB2.mongdb及主流数据库 使用HBase做 ...