【JS30-WesBos】使用CSS变量实现图像处理03

时间：2023-03-27 15:07:10 JavaScript

title:【Nativejavascriptproject】ImageProcessingwithJavascipt03date:2021-11-1311:43:56tags:Nativejavascriptprojectcategories:30nativejavascriptprojects介绍本文使用javascripts更新css变量实现一个简单的图像处理网页。对于图像处理部分，本网页可以调整图像的边框宽度、模糊度和边框颜色值。网址为(https://janice143.github.io/i...)正文1页面布局页面分为三部分：标题、三个输入组成的控件、图片。通过调整三个Inputs的值，可以实现外部距离、模糊值和颜色的变化。1.HTML代码1Title

使用JS更新CSS自定义变量

2三个输入值边距：模糊值：基色：

data-unit="px"是自己设置的dataset（数据集合）。输入的类型和对应的效果如图所示。输入的id名称一般与name相同。3Image2.CSS代码1CSS变量变量声明：在选择器（任意选择器）中，变量名前加两个连词Wire(--).在本文中，它在:root根元素中声明。这是声明全局变量的方式，确保可以使用任何选择器。变量名称区分大小写。img{边距顶部：50px;宽度：600px；高度：375px；padding:var(--spacing);/*var函数获取变量*/background-color:var(--color);filter:blur(var(--blur));}读取变量：使用var()函数读取：root{--color:#fecc00;--间距：10px；--blur:10px;}css变量参考网址：(https://www.ruanyifeng.com/bl...)3.JavaScript代码1suffix中文意思是后缀。在js代码中，设置了一个后缀变量。这是因为spacing和blur的值在CSS中需要加上px单位，而color的值不需要，所以||使用逻辑运算。2this.dataset需要注意的是，在html代码中，我们设置了自定义的data-unit数据，this.dataset会取出所有自定义的数据集，比如可以在Html中设置data-key（回想一下以前几天的js程序),data-name,data-poo任意数据名，因为是自定义的。this.dataset.unit是在本文的html代码中预先设置好的。3document.documentElement用于获取当前文档的直接子节点，对于Html文档，一般为。4style.setProperty(propertyName,value);给css样式的某个属性名propertyName赋一个新的value值。5--${this.name}是模板字面量，可以嵌入到表达式的字符串字面量中，${}代表占位符。一般的字符串用单引号或者双引号标示，这些字符串没有区别，模板字面量可以通过占位符进行插值，模板字面量用反引号``实现。6箭头函数优点：简而言之，this指向函数定义生效的对象。函数声明：关键字、函数名、参数、函数体functionfunctionName([arg1[,arg2[...,argn]]]){//functionBody函数体}当没有函数名时，该函数为匿名函数constsquare=function(number){returnnumber*number;};//相当于一个箭头函数：number=>number*number;命名函数由函数名组成，函数可以引用自身（迭代函数）constfactorial=functionfac(n){returnn<2?1:n*fac(n-1);};console.log(factorial(3));varx=square(4);//得到x的值为16的箭头函数；如果函数体只有一个表达式，可以使用{}符号constfn=()=>{//dosomething};//获取Input的值并赋值给cssconstinputs=document.querySelectorAll('.controllersinput');functionupdateValue(){constsuffix=this.dataset.unit||'';//为模糊和间距添加单位document.documentElement.style.setProperty(`--${this.name}`,this.value+suffix);}inputs.forEach(input=>input.addEventListener('change',更新值））；结论完整代码在Github上。有兴趣的读者不妨一试。