原文：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. Error resolving version for plugin 'org.codehaus.mojo:tomcat-maven-plugin'

    从 SNV 导入新工程后,启动工程,但 Maven 报错: Error resolving version for plugin 'org.codehaus.mojo:tomcat-maven-plu ...

  2. 【转】阿里出品的ETL工具dataX初体验

    原文链接:https://www.imooc.com/article/15640 来源:慕课网 我的毕设选择了大数据方向的题目.大数据的第一步就是要拿到足够的数据源.现实情况中我们需要的数据源分布在不 ...

  3. MQ（转）

    1. 到底什么时候该使用MQ? 1). 典型场景一:数据驱动的任务依赖 采用MQ的优点是: a. 不需要预留buffer,上游任务执行完,下游任务总会在第一时间被执行 b. 依赖多个任务,被多个任务依 ...

  4. go语言，golang学习笔记4 用beego跑一个web应用

    go语言,golang学习笔记4 用beego跑一个web应用 首页 - beego: 简约 & 强大并存的 Go 应用框架https://beego.me/ 更新的命令是加个 -u 参数,g ...

  5. 高性能NIO框架Netty入门篇

    http://cxytiandi.com/blog/detail/17345 Netty介绍 Netty是由JBOSS提供的一个java开源框架.Netty提供异步的.事件驱动的网络应用程序框架和工具 ...

  6. [转载]基于 Token 的身份验证

    作者:王皓发布于:2015-08-07 22:06更新于:2015-08-07 22:07 最近了解下基于 Token 的身份验证,跟大伙分享下.很多大型网站也都在用,比如 Facebook,Twit ...

  7. xml文件中[Invalid byte 1 of 1-byte UTF-8 sequence.]的解决方案

    问题描述: 导入项目包后发生xml文件出现错误信息:[Invalid byte 1 of 1-byte UTF-8 sequence.],如下截图所示: 解决方案: 将xml文件全部内容剪切到Note ...

  8. ES6知识整理（2）--变量的解构赋值

    最近准备在业余空闲时间里一边学习ES6,一边整理相关知识.只有整理过的学习才是有效的学习.也就是学习之后要使用和整理成文,才是真正的学到了... 上一篇是一个试水,现在接上. 变量提升 看了下朋友回复 ...

  9. 【题解】Luogu P5068 [Ynoi2015]我回来了

    众所周知lxl是个毒瘤,Ynoi道道都是神仙题,这道题极其良心,题面好评 原题传送门 我们先珂以在\(O(n^2)\)的时间内bfs求出任意两点距离 我们考虑如何计算从一个点到所有点的最短路长度小于等 ...

  10. 【题解】Luogu P2605 [ZJOI2010]基站选址

    原题传送门:P2604 [ZJOI2010]基站选址 看一眼题目,变知道这题一定是dp 设f[i][j]表示在第i个村庄修建第j个基站且不考虑i+1~n个村庄的最小费用 可以得出f[i][j] = M ...