关于javascript:JS30Wes-Bos利用CSS变量实现图像处理-03

26次阅读

共计 2502 个字符，预计需要花费 7 分钟才能阅读完成。

title:【原生 javascript 我的项目】Image Procession with Javascipt 03
date: 2021-11-13 11:43:56
tags: 原生 javascript 我的项目
categories: 30 个原生 javascript 我的项目

本文利用 javascripts 更新 css 变量，实现一个繁难的图像处理网页。对于图像处理局部，本网页可调节图像的边框宽度、含糊度以及边框色彩值。

网址为(https://janice143.github.io/i…)

页面分为三局部：题目、三个 input 组成的控件、图像

通过调节三个 Input 的值，能够实现对外边距、含糊值和色彩的扭转。

一、html 代码

1 题目

<h2> 利用 <span class="text-color">JS</span> 更新 CSS 自定义变量 </h2>
    

    <img src="https://source.unsplash.com/7bwQXzbF6KE/800x500">

</div>

2 三个 input 值

<div class="controlers">
    <label for="spacing"> 外边距:</label>
    <input id="spacing" type="range" name="spacing" value="10" data-unit="px">

    <label for="blur"> 含糊值:</label>
    <input id="blur" type="range" name="blur" value="10" data-unit="px">

    <label for="color"> 底色:</label>
    <input id="color" type="color" name="color" value="#fecc00">
</div>

data-unit=”px” 是本人设置的 dataset(数据汇合)。input 的 type 类型和对应成果如图。

input 的 id 名字个别和 name 一样。

3 图像

<img src="https://source.unsplash.com/7bwQXzbF6KE/800x500">

二、css 代码

1 css 变量

变量申明：在选择器里（任何选择器），变量名后面要加两根连词线（--）。本文里在:root 根元素里申明，这是全局变量的申明形式，保障任何选择器都能够应用。变量名大小写敏感。

img{
    margin-top:50px;
    width:600px;
    height: 375px;
    padding: var(--spacing);/* var 函数获取变量 */
    background-color: var(--color);
    filter:blur(var(--blur));
}

读取变量：利用 var()函数读取

 :root{
     --color:#fecc00;
     --spacing:10px;
     --blur:10px;
}

css 变量参考网址：（https://www.ruanyifeng.com/bl…）

三、javascript 代码

1 suffix 中文意思为后缀。在 js 代码中，设置了一个 suffix 变量，这是因为 spacing 和 blur 的值在 css 中须要加上 px 单位，而 color 的值没有，所以应用了 || 逻辑运算。

2 this.dataset 须要留神一下，在 html 代码中，咱们设置了自定义了 data-unit 数据，this.dataset 会取出所有自定义的数据集，比方你能够在 Html 中设置 data-key(回想起前几天的 js 程序）,data-name,data-poo 任何数据名字，因为是自定义。this.dataset.unit 是本文在 html 代码中提前设置好的。

3 document.documentElement 用来获取以后文档的间接子节点，对于 Html 文档而言，个别是 <html>。

4 style.setProperty(propertyName, value); 给 css 款式某个属性名 propertyName 赋一个新值 value。

5 --${this.name}为模板字面量，能够嵌入表达式的字符串字面量，${}示意一个占位符。个别的字符串是用单引号或者双引号标注的，这些字符串之间没有任何区别，而模板字面量则能够通过一个占位符来进行插值，模板字面量用反引号 “ 实现。

6 箭头函数长处：剪短、this 指向函数定义失效时所在对象。

函数申明：关键字、函数名、参数、函数体

function functionName ([arg1 [,arg2 [...,argn]]]) {// functionBody 函数体}

没有函数名时，函数为匿名函数

const square = function (number) {return number * number;};
// 相当于箭头函数：number=>number*number;

具名函数由函数名，而且函数外部能够代指自身（迭代函数应用）

const factorial = function fac(n) {return n < 2 ? 1 : n * fac(n - 1);};
console.log(factorial(3));
var x = square(4);// x 失去的值为 16

箭头函数；如果函数体只有一个表达式，能够不必 {} 符号

const fn = () => {  // do something};

// 获取 Input 的 value，并且将 value 赋值给 cssconst inputs = document.querySelectorAll('.controlers input');function updateValue(){    const suffix = this.dataset.unit || ''; // 给 blur 和 spacing 加单位    document.documentElement.style.setProperty(`--${this.name}`,this.value + suffix);}inputs.forEach(input=>input.addEventListener('change',updateValue));

残缺代码放在了 Github 上，如果读者有趣味，无妨试一试。

正文完