原文：http://css-live.ru/articles/dostup-k-css-peremennym-i-ix-izmenenie-spomoshhyu-javascript.html

  :root {

    --footer-color: #2cba92;

    /* @reasonCode зеленый */

    --palatte-padding-left: 0px

  }

  footer {

    width: 50px;

    height: 50px;

    margin-top: 20px;

    margin-left: var(--palatte-padding-left);

    background-color: var(--footer-color);

    border-radius: 15px;

  }


  const footer = document.querySelector('footer')

  const inputs = [].slice.call(document.querySelectorAll('input'));

  inputs.forEach(input => input.addEventListener('change', handleUpdate));

  inputs.forEach(input => input.addEventListener('mousemove', handleUpdate));

  function handleUpdate(e) {

    if (this.type === 'color') {

      footer.style.setProperty('--footer-color', this.value)

    } else {

      footer.style.setProperty('--palatte-padding-left', this.value + 'px')

    }

  }


  <body style="padding: 20px">

    <label>Выберите свой любимый цвет:</label>

    <input type="color" value="#2cba92">

    <br/>

    <label>Настройте отступ:</label>

    <input type="range" id="margin" min="10" max="200" value="0">

    <footer></footer>

  </body>
​

js操作css变量的更多相关文章

  1. js操作css样式，null和undefined的区别？

    1.js操作css的样式 div.style.width="100px"在div标签内我们添加了一个style属性,并设定了width值.这种写法会给标签带来大量的style属性, ...

  2. 11-13 js操作css样式

    1.Js操作css样式 Div.style.width=”100px”.在div标签内我们添加了一个style属性,并设定了width值.这种写法会给标签带来大量的style属性,跟实际项目是不符. ...

  3. JS操作css的float属性的特殊写法

    使用js操作css属性的写法是有一定的规律的: 1.对于没有中划线的css属性一般直接使用style.属性名即可. 如:obj.style.margin,obj.style.width,obj.sty ...

  4. js操作css样式、js的兼容问题

    一.js操作css样式 div . style . width="200px" 在div标签内我们添加了一个style属性,并设定width值.这种写法会给标签带来大量的style ...

  5. 通过JS操作CSS

    动态效果如图所示: 第一种实现方法: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...

  6. js 操作css

    类似于jquery的css()函数,js封装 CSS函数:css(oDiv , "width" , "200px ")设置样式css(oDiv , " ...

  7. JS操作CSS随机改变网页背景

    今天有个朋友在weibo上问我可不可以用JS和CSS让页面每次刷新随机产生一张背景图,当然我的回答是可以的.具体可以这样做: 1.用JS定义一个图片数组,里面存放你想要随机展示的图片 1 2 3 4 ...

  8. JS操作CSS样式

    一.样式表(css) 使用样式表可以更好的显示WEB文档,也可以结合javascript从而实现很好的控制样式表. 样式(css)与内容(html): HTML是处理文档结构的,HTML可以实现如何把 ...

  9. JS操作css样式用法

    //html <div id="div1" style="background:red;"> 修改背景颜色 </div> <but ...

随机推荐

  1. byte & 0xff char 转换

    https://blog.csdn.net/lixingtao0520/article/details/75450883 版权声明:本文为博主原创文章,转载请注明作者与出处,http://blog.c ...

  2. Hadoop学习笔记之五：HDFS功能逻辑(1)

    Block Report DataNode会周期性(默认1小时)将自身节点全部block信息发送给NameNode,以让NameNode正确确维护block信息. 在Block Report的数据源D ...

  3. Nginx配置服务器静态文件支持跨域访问

    在server中配置 add_header Access-Control-Allow-Origin *; add_header Access-Control-Allow-Headers X-Reque ...

  4. nginx负载均衡六种策略

    Nginx服务器之负载均衡策略(6种)   一.关于Nginx的负载均衡 在服务器集群中,Nginx起到一个代理服务器的角色(即反向代理),为了避免单独一个服务器压力过大,将来自用户的请求转发给不同的 ...

  5. mycat基本概念及配置文件详解

    在介绍mycat之前,首先来了解一下数据库切分. 对于海量数据处理,按照使用场景,主要分为两类:联机事务处理(OLTP)和联机分析处理(OLAP). 联机事务处理也称为面向交易的处理系统,其基本特征是 ...

  6. ElasticSearch(二)CentOs6.4下安装ElasticSearch

    一.准备工作 Elastic 需要 Java 8 环境.如果你的机器还没安装 Java,先需要安装java环境,同时还注意要保证环境变量JAVA_HOME正确设置. 链接:https://pan.ba ...

  7. listen()函数中backlog参数分析

    实例分析1 将服务器端的listen函数backlog设置为2,用20个客户端与服务器建立连接,查看连接的建立情况. 服务器代码: #include <stdio.h> #include& ...

  8. maven maven.compiler.source和maven.compiler.target的坑

    最近建议产品组把jdk 1.7升级到1.8,昨晚开发报了个问题过来,说maven.compiler.source和maven.compiler.target改成1.8之后,编译出来的代码还是1.7,如 ...

  9. Docker 微服务教程(搭建真正的网站）

    Docker 是一个容器工具,提供虚拟环境.很多人认为,它改变了我们对软件的认识. 站在 Docker 的角度,软件就是容器的组合:业务逻辑容器.数据库容器.储存容器.队列容器......Docker ...

  10. intel webrtc 部署

    org link conference server Configure the MCU server 1. set the maximum numbers of open files, runnin ...