<!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. selenium Java-1 配置

      1.使用intellij新建一个maven项目,名字自定.在pom中写入selenium的依赖.其他依赖也添加到该文件中. [maven selenium依赖](http://mvnreposit ...

  2. 1012 The Best Rank （25 分）

    1012 The Best Rank (25 分) To evaluate the performance of our first year CS majored students, we cons ...

  3. [UE4]射击和直线追踪

    只有有朝向的组件(如character.Controller等)才能动态获取到朝向,在编辑视图中会有一个箭头表示正前方: 如果是没有朝向的组件(如摄像机),则获取到的朝向永远是固定的

  4. Nginx的启动、停止、重启

    启动 启动代码格式:nginx安装目录地址 -c nginx配置文件地址 例如: [root@LinuxServer sbin]# /usr/local/nginx/sbin/nginx -c /us ...

  5. Ps操作技巧（快捷键大全）

    一.工具箱(多种工具共用一个快捷键的可同时按[Shift]加此快捷键选取) 矩形.椭圆选框工具 [M] 移动工具 [V] 套索.多边形套索.磁性套索 [L] 魔棒工具 [W] 裁剪工具 [C] 切片工 ...

  6. solr查询空值、null、不存在的字段的方法

    正常情况下我们都是按有值的方式去搜索,但是有时候有一些字段为null,solr中就没有存储进去,我们怎么获取这个字段不存在为条件的搜索结果了,我们只需要在搜索字段前加上负号,如下图 摘要: Solr的 ...

  7. Django静态图片参数解析

    使用Django静态设置时,遇到很多问题,经过艰苦的Baidu, stack overflow, Django原档阅读,终于把静态图片给搞出来了.特记录下来. 关键的概念:Django中,静态资源的存 ...

  8. 33. Linux安装配置JDK-7

    安装说明 系统环境:centos-6.3安装方式:rpm安装 软件:jdk-7-linux-x64.rpm下载地址:http://www.oracle.com/technetwork/java/jav ...

  9. HTML5 Canvas ( 绘制一轮弯月, 星空中的弯月 )

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  10. VBA 获取文件夹内的文件列表

    Private strFiles(20) Private Sub GetFiles(ByVal strFolder As String, ByVal ty As String) ' 获取文件列表 If ...