<!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. CORS跨域的概念与TP5的解决方案

    namespace app\api\behavior; use think\Response; class CORS{ public function appInit(&$params) { ...

  2. Eclipse修改workspace目录的几种方式

    Eclipse是一款很强的Java IDE,我们在开始的时候,往往设定了默认的workspace,当用久在之后,我们可能要去更改一下workspace的位置.下面有几种方法可以更改workspace的 ...

  3. 基于标准库实现string和wstring的转换

    // convert string to wstring std::wstring to_wstring(const std::string& str, const std::locale&a ...

  4. unity3d动态加载dll的API以及限制

    Unity3D的坑系列:动态加载dll 一.使用限制 现在参与的项目是做MMO手游,目标平台是Android和iOS,iOS平台不能动态加载dll(什么原因找乔布斯去),可以直接忽略,而在Androi ...

  5. ubuntu 18.04下svn的安装与基本命令

    一.安装: apt-get install subversion 二.基本命令 1.将文件checkout到本地目录 svn checkout path(path是服务器 上的目录)例如:svn ch ...

  6. Dividing Infinity - Distributed Partitioning Schemes

    This is the second post in a series discussing the architecture and implementation of massively para ...

  7. cmd命令总结

    1.进入d盘 2.命令运行D:\mongodb\bin中的mongod.exe  显示安装成功!(命令行下运行 MongoDB 服务器)

  8. jpa-入门级测试

  9. 定时器 setInterval(‘function()’, 2000）

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  10. Java 跨域 CrossOrigin注解 Filter拦截 Nginx配置

    说明 资源请求的发起方与请求的资源不在同一个域中的: 一般的,只要网站的[协议名protocol].[主机host].[端口号port]这三个中的任意一个不同,网站间的数据请求与传输便构成了跨域调用: ...