<!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. R语言学习——列表

    1.列表 列表是一种泛化的向量,其并没有要求所有元素都是同一类型,其元素甚至可为任意类型. 列表格式自由,为统计的计算结果的返回提供了极便利的方法. 2.列表的创建 可以用list()函数创建列表. ...

  2. document.write覆盖问题

    1.不会覆盖页面: 如果仅仅是一句js语句:document.writeln('<span id=\'span1\'>嗯,你好</span>'); ps:\'是转义字符,代表' ...

  3. webservice框架jersey 文章

    webservice框架jersey简单总结 Jersey系列文章: Jersey框架一:Jersey RESTful WebService框架简介 Jersey框架二:Jersey对JSON的支持 ...

  4. java-appium-527手机浏览器、PC端程序、grid模式

    1.手机浏览器 2.window通用成语自动化 3.appium支持grid模式

  5. [UE4]机器人自动寻路

    要让机器人能够自动寻路,需要画出自动寻路的范围,可以使用“Nav  Mesh Bounds Volume”组件来自定寻路范围 通过“Delay”节点可以实现让AI执行Move To以后停顿1秒,然后继 ...

  6. 关于json_encode()的使用注意

    json_encode($json_str,true)在一般情况下可以返回一个数组,但当$json_str的字符编码是GBK或其它时,返回的是一个 空数组,必须用iconv(‘gbk’,‘ut8//I ...

  7. javascript节点操作appendChild()

    cloneNode(a)方法接受一个布尔值参数,表示是否深拷贝 true:表示执行深拷贝,复制本节点以及整个子节点树. false:浅拷贝.只复制节点本身. 复制后返回的节点副本属于文档所有,但是并没 ...

  8. kudu和kudu-impala的安装流程

    安装apache的kudu 第一步:下载rpm包 http://archive.cloudera.com/kudu/redhat/6/x86_64/kudu/5.11.0/RPMS/x86_64/ 第 ...

  9. html5 如何实现客户端验证上传文件的大小

    在HTML 5中,现在可以在客户端进行文件上传时的校验了,比如用户选择文件后,可以 马上校验文件的大小和属性等.本文章向码农介绍html5 如何实现客户端验证上传文件的大小,感兴趣的码农可以参考一下. ...

  10. 微软SMB 3.0文件共享协议新特性介绍

    SMB(*nix平台和Win NT4.0又称CIFS)协议是Windows平台标准文件共享协议.Linux平台通过samba来支持.SMB最新版本v3.0,在v2.0基础上针对WAN和分布式有改进.详 ...