原文：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. [DeploymentService:290066]Error occurred while downloading files from admin server for deployment request "0". Underlying error is: "null"

    weblogic 莫名无法启动: <Apr , :: PM CST> <Error> <Deployer> <BEA-> <Failed to i ...

  2. Set接口——HashSet集合

    不重复,无索引,不能重复元素,没有索引: HashSet集合: 此时实现Set接口,有哈希表(HashMap的一个实例)支持,哈希表意味着查询速度很快, 是无序的,即元素的存取的顺序可能不一致: 且此 ...

  3. 利用arcgis发布综合又详细的地理定位服务

    数据: sheng:省,city:城市,xian:区县,street2:街道,life:生活服务(house:住宅小区)需求: 根据经纬度信息,得到详细地址信息,比如:甘肃省兰州市**县**街道**小 ...

  4. POJ 1018 Communication System （动态规划）

    We have received an order from Pizoor Communications Inc. for a special communication system. The sy ...

  5. MySQL5.7 的新特点

    1.安全性 MySQL 5.7 的目标是成为发布以来最安全的 MySQL 服务器,其在 SSL/TLS 和全面安全开发方面有一些重要的改变. mysql.user表结构升级 MySQL5.7用户表my ...

  6. Golang框架beego电影网爬虫小试牛刀

    学习了一段时间golang,又参考课程学习了beego开发网站爬虫,项目的目录结构是: 采集的目标是豆瓣网电影,入口地址是:https://movie.douban.com/subject/19008 ...

  7. Could not get lock /var/lib/dpkg/lock - open (11: Resource temporarily unavailable) E: Unable to lock the administration di

    alexander@alexander-virtual-machine:~$ sudo apt-get install -y httpdE: Could not get lock /var/lib/d ...

  8. win7改装 CentOS7，装完后开机，没有引导

    本来系统是win7,安装centos是用U盘启动安装方式安装成功后,发现win7的系统引导不见了.之前用的是centos6.4安装后依然保留win7引导的,到centos7就不行了 解决方法1.使用r ...

  9. opencv学习之路（11）、图像几何变换

    一.图像缩放 #include<opencv2/opencv.hpp> using namespace cv; void main(){ Mat src=imread("E:// ...

  10. Codeforces 834D The Bakery - 动态规划 - 线段树

    Some time ago Slastyona the Sweetmaid decided to open her own bakery! She bought required ingredient ...