Day3-CSS 变量

最新推荐文章于 2022-04-11 22:52:34 发布

Conso1e

最新推荐文章于 2022-04-11 22:52:34 发布

阅读量129

点赞数

分类专栏： JavaScript 文章标签： CSS JS INPUT

本文链接：https://blog.csdn.net/qq_41366268/article/details/89202530

版权

JavaScript 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

Input

<input type="color" value="#ff0000" />
<input type="range" min="0" max="11" value="5" />

用来创建一个允许用户使用颜色选择器的区域（不支持Alpha通道），注意HTML5新增的表单类型，见MDN文档：https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/Input/color

CSS变量

作用和Less类似，在整个文档中重复使用的特定值。使用自定义属性来设置变量名，并使用特定的 var() 来访问。之前只用过Less，不知道这个的存在，原来原生的就可以实现。
文档：https://developer.mozilla.org/zh-CN/docs/Web/CSS/Using_CSS_custom_properties

// 全局
:root {
  --global-color: #666;
  --pane-padding: 5px 42px;
}

// 局部
element {
  --main-bg-color: brown;   // 声明
}

element {
  background-color: var(--main-bg-color);  // 使用
  color: var(--global-color: #666;)
}

Filter

背景模糊和图片模糊
会产生的问题：白边和容器外围模糊

HTMLElement.dataset

HTML5 中的自定义数据属性集 dataset （属性集合，理解为一个对象？）

<div id="user" data-id="1234567890" data-user="johndoe" data-date-of-birth>John Doe</div>

var el = document.querySelector('#user');

 el.id == 'user'
 el.dataset.id === '1234567890'
 el.dataset.user === 'johndoe'
 el.dataset.dateOfBirth === ''

用 JavaScript 改变 CSS 属性值

在 JavaScript 中 document.documentElement 即代表文档的根元素，也就是 <html> 标签。

document.documentElement.setProperty('--global-color', '#fff');

<style>
   img {
		  padding: var(--spacing);
		  background: var(--base);
		  filter: blur(var(--blur));
	  }
</style>

思路：传入每次鼠标点击或者滑动之后的新value给全局CSS变量，然后把根元素的样式应用在结果图片上

input.addEventListener('mousemove', handleUpdate)

DOM 将文档解析为一个由节点和对象（包含属性和方法的对象）组成的结构集合。

Conso1e

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Day3-CSS 变量

<input type="color">https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/Input/color传入每次鼠标点击或者滑动之后的新value把根元素的样式应用在结果图片上https://developer.mozilla.org/zh-CN/docs/Web/CSS/Using_CSS_custo...
复制链接

扫一扫