<!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. Tensorflow笔记——神经网络图像识别（五）手写数字识别

  2. [转][Chrome]浏览器粘贴行为

    <html> <head> <meta charset="UTF-8"> <title>test chrome paste imag ...

  3. http接口测试工具——RESTClient

    摘要: RESTClient是用java Swing编写的基于http协议的接口测试工具,工具比较灵巧,便于做接口的调试,源码在官网上可以下到,感兴趣的可以研究一下 WizTools.org REST ...

  4. TensorFlow函数：tf.FIFOQueue队列

    转载:https://blog.csdn.net/akadiao/article/details/78552037 tf.FIFOQueue tf.FIFOQueue继承基类QueueBase． Qu ...

  5. xgboost的遗传算法调参

    遗传算法适应度的选择: 机器学习的适应度可以是任何性能指标 —准确度,精确度,召回率,F1分数等等.根据适应度值,我们选择表现最佳的父母(“适者生存”),作为幸存的种群. 交配: 存活下来的群体中的父 ...

  6. numpy的shuffle函数

    import numpy as np from numpy.random import shuffle import pandas as pd df = pd.DataFrame([[1,2,3],[ ...

  7. OpenGL 多线程共享纹理

    1:opengl 多线程共享纹理纹理: //解码时候使用opengl进行绘制,需要构建队列和两个线程,分别用于解码数据并且填充纹理和渲染. 主线程常见两个共享上下文: main() { ⋯⋯⋯⋯ gH ...

  8. Spark分析之MemoryStore

    private case class MemoryEntry(value: Any, size: Long, deserialized: Boolean) class MemoryStore(bloc ...

  9. 资源 | 源自斯坦福CS229，机器学习备忘录在集结

    在 Github 上,afshinea 贡献了一个备忘录对经典的斯坦福 CS229 课程进行了总结,内容包括监督学习.无监督学习,以及进修所用的概率与统计.线性代数与微积分等知识. 项目地址:http ...

  10. Mac上如何用命令修改文件内容

    首先打开iTerm,切到文件所在的文件夹目录下 cd xx 然后进入编辑模式 vim xx.xx 然后插入修改 shift + i 修改之后退出插入模式 esc 保存退出 shift + :  wq