javascript30--day03--Css Variables
相关视频链接: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属性 | 用途 | 用法 | 截图 |
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"/> |
|
range | 用于包含一定范围数字值的输入域,显示为滑动条 |
<input type="range" name="points" min="1" max="100" step="10" value="55"/> |
|
color | 用于包含一定范围数字值的输入域,显示为滑动条 |
<input type="color" name="color" value="#0A5532"/> |
|
Date Pickers | 提供多个选取日期和时间的新输入类型 |
<input type="date"/> |
|
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
声明 | 使用 | |
全局变量 |
//声明全局变量 |
//使用全局变量 |
局部变量 |
//声明局部变量 |
//使用局部变量 |
(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的更多相关文章
- CSS Variables
CSS原生变量(CSS自定义属性) 示例地址:https://github.com/ccyinghua/Css-Variables 一.css原生变量的基础用法 变量声明使用两根连词线"-- ...
- [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 ...
- CSS Variables:css自定义属性的使用
CSS Variables,一个并不是那么新的东西,但对css来说绝对是一场革命.之前使用变量的时候,需要借助sass.less等预处理工具来实现,现在我们可以直接使用css来声明变量. 一.兼容性 ...
- css variables & CSS 变量
css variables & CSS 变量 https://gist.github.com/xgqfrms-GitHub/5d022a13292c615d2730e84d909e1aba c ...
- 引人瞩目的 CSS 变量(CSS Variable)
这是一个令人激动的革新. CSS 变量,顾名思义,也就是由网页的作者或用户定义的实体,用来指定文档中的特定变量. 更准确的说法,应该称之为 CSS 自定义属性 ,不过下文为了好理解都称之为 CSS 变 ...
- CSS技巧-rgba函数的妙用
先简单介绍一下: rgba()函数是平时开发中经常遇到的,这篇文章也做了一个比较详细的解读以及一系列的应用. 对它的工作原理做一番分析:就是具有一定透明度的盒子: 还比较了rgba()函数和不透明度属 ...
- CSS变量(自定义属性)实践指南
本文翻译自:https://www.sitepoint.com/practical-guide-css-variables-custom-properties/ 转载请注明出处:葡萄城官网,葡萄城为开 ...
- CSSの変数を使う
この文章はhttps://developer.mozilla.org/ja/docs/Web/CSS/Using_CSS_variablesを参考します. これは実験段階の機能です.この機能は複数のブ ...
- CSS 变量教程
一.变量的声明 声明变量的时候,变量名前面要加两根连词线(--). body { --foo: #7F583F; --bar: #F7EFD2; } 上面代码中,body选择器里面声明了两个变量:-- ...
- 原生css 中变量的使用
前两天看到阮大神的一篇在css中使用变量的文章,整理了一下. 这个重要的 CSS 新功能,所有主要浏览器已经都支持了.本文全面介绍如何使用它,你会发现原生 CSS 从此变得异常强大. 一.变量的声明 ...
随机推荐
- matplotlib 直方图
一.特点 数据必须是原始数据不能经过处理,数据连续型,显示一组或多组分布数据 histogram 直方图 normed 定额 二.核心 hist(x, bins=None, normed=None) ...
- 【转】document.form.action,表单分向提交
document.form.action,表单分向提交,javascript提交表单 同一个表单可以根据用户的选择,提交给不同的后台处理程序.即,表单的分向提交.如,在编写论坛程序时,如果我们希望实现 ...
- 阿里巴巴Jetcache springboot使用教程
原文地址:https://www.jianshu.com/p/03b289439de2 springboot中使用说明 jetcache原理参见:https://www.jianshu.com/p/8 ...
- 如何修改win7文件夹的显示方式为详细信息
1.首先对着空白处,鼠标右键单击,然后点击“排列方式” 选一个 还有 你还可以点击“查看” 选择图标大小.详细信息.平铺.列表 等2.点击我的电脑左上角的 组织 按钮 随后选择“文件夹和搜索选项” 再 ...
- 用canvas绘制标准的五星红旗
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Java Swing图形界面开发
本文转自xietansheng的CSDN博客内容,这是自己见过的最通俗易懂.最适合快速上手做Java GUI开发的教程了,这里整合一下作为自己以后复习的笔记: 原文地址:https://blog.cs ...
- [集训]Trominoes,钩子公式运用
题意 用这四种骨牌密铺n*m的正方形矩阵,可以不选,求方案数.n*m<=1E8.多组询问. 思考 用如上的表达难以进行计算,尝试转化为一种新的组合解释. 若从右上角开始填起,我们强制要求里面的轮 ...
- 在windows中python安装sit-packages路径位置 在Pycharm中导入opencv不能自动代码补全问题
在Pycharm中导入opencv不能自动代码补全问题 近期学习到计算机视觉库的相关知识,经过几个小时的探讨,终于解决了opencv不能自动补全代码的困惑, 我们使用pycharm安装配置可能会添加多 ...
- TypeScript——基本类型
关于数据类型 原始类型 let bool: boolean = true; let num: number = 1; let str: string = 'i am string'; 引用类型 let ...
- Docker底层架构之命名空间
前言 命名空间是 Linux 内核一个强大的特性.每个容器都有自己单独的命名空间,运行在其中的 应用都像是在独立的操作系统中运行一样.命名空间保证了容器之间彼此互不影响.相应的命名空间功能如下: pi ...