相关视频链接:https://www.bilibili.com/video/av8481988/?p=5

相关github地址:https://github.com/soyaine/JavaScript30

做题思路:

(1)监视input,当有change事件或mousemove事件发生的时候,就调用函数handleUpdate();

(2)用js改变css属性:document.documentElement.style.setProperty(" 某css属性",新值);//即jQuery中的$().css();

(3)用js获取data-自定义的属性:xx.dataset.sizing;  //获取xx标签内的自定义属性data-sizing的值

需要了解的知识点:

1,html5部分

(1)input属性

input的输入类型现在已经有email, url, number, range, Date picker(date, month, week, time, datetime,  datetime-locale), search, color

但是主流浏览器中Firefox全支持,chrome不支持color(其他浏览器支持的不多)

type属性 用途 用法 截图
email e-mail地址的输入域,在提交表单的时候,会自动验证Email的值
Email : <input type="email"  name="user_email"/>
number 用于包含数值的输入域,可设置对所接受的数字的限定
Points : <input type="number"  name="points" min="1" max="100" step="10" value="55"/>
<!-- max 允许的最大值; min 允许的最小值; step 规定合法的数字间隔; value 规定的默认值-->

range 用于包含一定范围数字值的输入域,显示为滑动条
<input type="range"  name="points" min="1" max="100" step="10" value="55"/>
<!-- max 允许的最大值; min 允许的最小值; step 规定合法的数字间隔; value 规定的默认值-->
color 用于包含一定范围数字值的输入域,显示为滑动条
<input type="color"  name="color" value="#0A5532"/>
<!-- value 规定的默认值-->
Date Pickers 提供多个选取日期和时间的新输入类型
<input type="date"/>
<!-- type值可以为date(选取日/月/年),month(月/年), week(周/年), time(小时/分钟),
datetime(时间/日/月/年(utc)), datetime-local(时间/日/月/年(本地时间))-->
url url的输入域,在提交表单的时候,会自动验证url的值
Homepage:<input type="email"  name="user_email"/>
 
search 搜索与,显示为常规的文本域
<input type="search">

 (2)自定义数据属性 data-

作用: 为元素提供与渲染无关的信息,或者提供语义信息

用法:

<div id="myDiv" data-myId="123" data-name="liu"></div>  //html中使用

//js中调用
var myDiv=document.getElementById('myDiv');
var myId= myDiv.dataset.myId; //'123',使用dataset属性访问自定义属性的值
var name= myDiv.dataset.name; //'liu'

2,css3部分

(1)css 变量

作用:为整个文档中重复使用的特定值。项目大了之后,方便统一修改

用法:使用自定义属性设置变量(--自定义属性名),使用特定的val()来访问 val(--自定义属性名)

https://developer.mozilla.org/zh-CN/docs/Web/CSS/Using_CSS_variables

  声明 使用
全局变量
//声明全局变量
:root{
--global-color: #666;
}
//使用全局变量
.demo{
color: var(--global-color);
}
局部变量
//声明局部变量
element{
--main-bg-color:red;
}
//使用局部变量
element{
background-color: var(--main-bg-color);
}

 (2):root

作用:伪类匹配文档树的根节点。对html来说,相当于<html>, 除了比<html>优先级高。

用法:一般用于声明全局css变量。

https://developer.mozilla.org/zh-CN/docs/Web/CSS/:root

(3)filter过滤器

https://developer.mozilla.org/zh-CN/docs/Web/CSS/filter

作用:提供图像特效(模糊,锐化,元素变色),通常用于调整图片,背景和边界的渲染。

用法:

//预定义的函数
filter : blur(5px);
filter : grayscale(80%); //svg滤镜
filte : url(svg-url#element-id);

demo地址:

https://codepen.io/lunaliu/pen/RBoPYO

javascript30--day03--Css Variables的更多相关文章

  1. CSS Variables

    CSS原生变量(CSS自定义属性) 示例地址:https://github.com/ccyinghua/Css-Variables 一.css原生变量的基础用法 变量声明使用两根连词线"-- ...

  2. [CSS3] Create Dynamic Styles with CSS Variables

    In this lesson we are going to use CSS variables to keep our application's colors consistent. This i ...

  3. CSS Variables:css自定义属性的使用

    CSS Variables,一个并不是那么新的东西,但对css来说绝对是一场革命.之前使用变量的时候,需要借助sass.less等预处理工具来实现,现在我们可以直接使用css来声明变量. 一.兼容性 ...

  4. css variables & CSS 变量

    css variables & CSS 变量 https://gist.github.com/xgqfrms-GitHub/5d022a13292c615d2730e84d909e1aba c ...

  5. 引人瞩目的 CSS 变量(CSS Variable)

    这是一个令人激动的革新. CSS 变量,顾名思义,也就是由网页的作者或用户定义的实体,用来指定文档中的特定变量. 更准确的说法,应该称之为 CSS 自定义属性 ,不过下文为了好理解都称之为 CSS 变 ...

  6. CSS技巧-rgba函数的妙用

    先简单介绍一下: rgba()函数是平时开发中经常遇到的,这篇文章也做了一个比较详细的解读以及一系列的应用. 对它的工作原理做一番分析:就是具有一定透明度的盒子: 还比较了rgba()函数和不透明度属 ...

  7. CSS变量(自定义属性)实践指南

    本文翻译自:https://www.sitepoint.com/practical-guide-css-variables-custom-properties/ 转载请注明出处:葡萄城官网,葡萄城为开 ...

  8. CSSの変数を使う

    この文章はhttps://developer.mozilla.org/ja/docs/Web/CSS/Using_CSS_variablesを参考します. これは実験段階の機能です.この機能は複数のブ ...

  9. CSS 变量教程

    一.变量的声明 声明变量的时候,变量名前面要加两根连词线(--). body { --foo: #7F583F; --bar: #F7EFD2; } 上面代码中,body选择器里面声明了两个变量:-- ...

  10. 原生css 中变量的使用

    前两天看到阮大神的一篇在css中使用变量的文章,整理了一下. 这个重要的 CSS 新功能,所有主要浏览器已经都支持了.本文全面介绍如何使用它,你会发现原生 CSS 从此变得异常强大. 一.变量的声明 ...

随机推荐

  1. http的异步请求

    需要用到的包(包版本应该可能不同): httpcore-4.1.4.jar httpsayncclient-4.0-alpha3.jar httpcore-nio-4.2-alpha3.jar /** ...

  2. 去除空白字符串trim

    let str = ' foo ' //去除开头空格 console.log(str.trimLeft()) console.log(str.trimStart()) //去除尾部空格 console ...

  3. [bzoj4815] [洛谷P3700] [Cqoi2017] 小Q的表格

    Description 小Q是个程序员. 作为一个年轻的程序员,小Q总是被老C欺负,老C经常把一些麻烦的任务交给小Q来处理. 每当小Q不知道如何解决时,就只好向你求助.为了完成任务,小Q需要列一个表格 ...

  4. windows下RocketMQ安装部署

    一.预备环境 1.系统 Windows 2. 环境 JDK1.8.Maven.Git 二. RocketMQ部署 1.下载 1.1地址:http://rocketmq.apache.org/relea ...

  5. 《Sequence Models》课堂笔记

    Lesson 5 Sequence Models 这篇文章其实是 Coursera 上吴恩达老师的深度学习专业课程的第五门课程的课程笔记. 参考了其他人的笔记继续归纳的. 符号定义 假如我们想要建立一 ...

  6. influxdb基础那些事儿

    InfluxDB是一个开源的时序数据库,使用GO语言开发,特别适合用于处理和分析资源监控数据这种时序相关数据.而InfluxDB自带的各种特殊函数如求标准差,随机取样数据,统计数据变化比等,使数据统计 ...

  7. 缓冲区溢出实例(二)--Linux

    原理:crossfire 1.9.0 版本接受入站 socket 连接时存在缓冲区溢出漏洞. 工具: 调试工具:edb: ###python在漏洞溢出方面的渗透测试和漏洞攻击中,具有很大的优势   实 ...

  8. Math.Atan2 方法

    返回正切值为两个指定数字的商的角度. public static double Atan2 ( double y, double x ) 参数 y 点的 y 坐标. x 点的 x 坐标. 返回值 角  ...

  9. 谈谈 InnoDB引擎中的一些索引策略

    如果我们在工作能够更好的利用好索引,那将会极大的提升数据库的性能. 覆盖索引 覆盖索引是指在普通索引树中可以得到查询的结果,不需要在回到主键索引树中再次搜索 建立如下这张表来演示覆盖索引: creat ...

  10. Windows 10搭建Apache2.4 + PHP7 + MySQL环境

    一.准备 1.资源 Apache https://www.apachelounge.com/download/ PHP http://windows.php.net/download#php-7.0 ...