原文：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. greenplum presto impala选型与测评

    查看原文请至:https://my.oschina.net/hblt147/blog/1843028

  2. 什么是FEBS

    FEBS后台权限管理系统      FEBS是一个简单高效的后台权限管理系统.项目基础框架采用全新的Java Web开发框架 —— Spring Boot2.0.4,消除了繁杂的XML配置,使得二次开 ...

  3. 20165316 实验四 Android程序设计

    20165316 孙勖哲 第四次实验 Android 程序设计1 参考 http://www.cnblogs.com/rocedu/p/6371315.html#SECANDROID, 安装 Andr ...

  4. vue 加载更多2

    <template lang="html"> <div class="yo-scroll" :class="{'down':(sta ...

  5. jumpserver堡垒机安装

    1. 下载jumpserver cd /opt wget https://github.com/jumpserver/jumpserver/archive/master.zip unzip maste ...

  6. 处理jquery的ajax请求session过期跳转到登录页面

    首先需要在拦截器中判断是否是ajax请求,如果是 if(isAjaxRequest(request)){//ajax请求 response.setHeader("sessionstatus& ...

  7. SpringMVC之数据绑定

    SpringMVC之数据绑定 #数据绑定:Spring MVC会根据客户端请求参数的不同,将请求信息以一定的方式转换并绑定 到控制器类中的方法参数上. #说明:这里的“以一定的方式”应该指的是什么?过 ...

  8. mysql备份与还原-mysqldump备份、mysql与source还原

    以下都以在linux操作系统上的mysql为例 mysqldump备份 mysqldump实际就是将数据库中的数据转化为建库.建表和插入记录的sql语句 1.备份一个数据库 [或其中几个表],不指定表 ...

  9. Mac配置java运行环境的步骤

    官网下载地址:jdk1.8版本的  http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.htm ...

  10. bzoj4566 / P3181 [HAOI2016]找相同字符

    P3181 [HAOI2016]找相同字符 后缀自动机 (正解应是广义后缀自动机) 并不会广义后缀自动机. 然鹅可以用普通的后缀自动机.   我们先引入一个问题:算出从一个串内取任意两个不重合子串完全 ...