培训网站建设,app推广项目从哪接一手,平面设计软件图标,wordpress加入音乐1、前言
前一篇博客介绍了Dojo中基础的dom操作方法#xff0c;主要是针对html中的常用标签和属性进行操作。而一个优秀的线上网站自然也离不开css样式的从旁辅助。在实际开发过程中#xff0c;我们经常会遇到需要动态修改css样式的问题#xff0c;本文就来介绍一下如何在Do…1、前言
前一篇博客介绍了Dojo中基础的dom操作方法主要是针对html中的常用标签和属性进行操作。而一个优秀的线上网站自然也离不开css样式的从旁辅助。在实际开发过程中我们经常会遇到需要动态修改css样式的问题本文就来介绍一下如何在Dojo中对dom元素的css样式进行操作。
2、dojo/dom-style模块
Dojo中内置的dojo/dom-style模块可帮助开发者轻松实现对css样式的控制该模块主要包含get、set两个方法。
2.1、获取dom样式——get
get方法主要用来获取dom元素的style该方法包含两个参数第一个参数为dom元素第二个参数为样式名称下面代码演示了获取h1标签中color、background-color、text-align的属性值
!DOCTYPE html
html
headmeta http-equivContent-Type contenttext/html; charsetutf-8 /meta nameviewport contentinitial-scale1, maximum-scale1,user-scalableno /titledemo/titlescript srchttp://localhost/arcgis_js_api/library/4.15/dojo/dojo.js/script
/head
bodyh1 idtitle stylecolor:red;background-color:white;text-align:center;这是标题/h1scriptrequire([dojo/dom, dojo/dom-style, dojo/domReady!], function (dom, domStyle) {var title dom.byId(title);console.log(domStyle.get(title, color));console.log(domStyle.get(title, background-color));console.log(domStyle.get(title, text-align));});/script
/body
/html运行结果如下所示
rgb(255, 0, 0)
rgb(255, 255, 255)
center2.2、设置dom样式——set
set方法主要用来设置dom元素的style该方法包含三个参数第一个参数为dom元素第二个参数为样式名称第三个参数为样式属性值下面代码演示了设置h1标签中color、background-color、text-align的属性值
!DOCTYPE html
html
headmeta http-equivContent-Type contenttext/html; charsetutf-8 /meta nameviewport contentinitial-scale1, maximum-scale1,user-scalableno /titledemo/titlescript srchttp://localhost/arcgis_js_api/library/4.15/dojo/dojo.js/script
/head
bodyh1 idtitle stylecolor:red;background-color:white;text-align:center;这是标题/h1scriptrequire([dojo/dom, dojo/dom-style, dojo/domReady!], function (dom, domStyle) {var title dom.byId(title);// getconsole.log(domStyle.get(title, color));console.log(domStyle.get(title, background-color));console.log(domStyle.get(title, text-align));// setdomStyle.set(title, color, blue);domStyle.set(title, background-color, red);domStyle.set(title, text-align, left);});/script
/body
/html运行结果如下图所示 3、dojo/dom-class模块
Dojo内置的dojo/dom-class模块也可以对dom元素的样式进行控制。相较于dojo/dom-style模块dojo/dom-class模块包含的功能更加丰富主要有add、contains、remove、replace、toggle等方法。
3.1、添加样式——add
add方法可用于添加css样式代码如下
!DOCTYPE html
html
headmeta http-equivContent-Type contenttext/html; charsetutf-8 /meta nameviewport contentinitial-scale1, maximum-scale1,user-scalableno /titledemo/titlestyle.one {color: blue;}.two {background-color: red;}/stylescript srchttp://localhost/arcgis_js_api/library/4.15/dojo/dojo.js/script
/head
bodyh1 idtitle这是标题/h1scriptrequire([dojo/dom, dojo/dom-class, dojo/domReady!], function (dom, domClass) {var title dom.byId(title);domClass.add(title, one);domClass.add(title, two);});/script
/body
/html运行结果如下图所示 3.2、移除样式——remove
remove方法可用于移除css样式下面代码演示了去除h1标签的red背景色
!DOCTYPE html
html
headmeta http-equivContent-Type contenttext/html; charsetutf-8 /meta nameviewport contentinitial-scale1, maximum-scale1,user-scalableno /titledemo/titlestyle.one {color: blue;}.two {background-color: red;}/stylescript srchttp://localhost/arcgis_js_api/library/4.15/dojo/dojo.js/script
/head
bodyh1 idtitle classone two这是标题/h1scriptrequire([dojo/dom, dojo/dom-class, dojo/domReady!], function (dom, domClass) {var title dom.byId(title);domClass.remove(title, two);});/script
/body
/html运行结果如下图所示 3.3、替换样式——replace
replace方法可用于替换css样式该方法包含三个参数第一个参数为dom元素第二个参数为替换后的样式第三个参数为替换前的样式下面代码演示了将h1标签的颜色从blue改为red
!DOCTYPE html
html
headmeta http-equivContent-Type contenttext/html; charsetutf-8 /meta nameviewport contentinitial-scale1, maximum-scale1,user-scalableno /titledemo/titlestyle.one {color: blue;}.two {color: red;}/stylescript srchttp://localhost/arcgis_js_api/library/4.15/dojo/dojo.js/script
/head
bodyh1 idtitle classone这是标题/h1scriptrequire([dojo/dom, dojo/dom-class, dojo/domReady!], function (dom, domClass) {var title dom.byId(title);domClass.replace(title, two, one);});/script
/body
/html运行结果如下图所示 3.4、样式开关——toggle
toggle方法可用于控制css样式的开关该方法包含三个参数第一个参数为dom元素第二个参数为样式名称第三个参数为布尔值true表示启用样式false表示关闭样式下面代码演示了使用radio表单控制h1标签的颜色
!DOCTYPE html
html
headmeta http-equivContent-Type contenttext/html; charsetutf-8 /meta nameviewport contentinitial-scale1, maximum-scale1,user-scalableno /titledemo/titlestyle.one {color: red;}/stylescript srchttp://localhost/arcgis_js_api/library/4.15/dojo/dojo.js/script
/head
bodyh1 idtitle classone这是标题/h1div iddivinput typeradio namea value开 checked开input typeradio namea value关关/divscriptrequire([dojo/dom, dojo/dom-class, dojo/domReady!], function (dom, domClass) {var title dom.byId(title);document.getElementById(div).addEventListener(click, function (e) {if (e.target.tagName INPUT) {var value e.target.value;if (value 开) {domClass.toggle(title, one, true);} else {domClass.toggle(title, one, false);}}})});/script
/body
/html运行结果如下图所示 3.5、是否包含某个样式——contains
contains方法可用于判断dom元素是否包含某个css样式代码如下
!DOCTYPE html
html
headmeta http-equivContent-Type contenttext/html; charsetutf-8 /meta nameviewport contentinitial-scale1, maximum-scale1,user-scalableno /titledemo/titlestyle.one {color: blue;}.two {background-color: red;}/stylescript srchttp://localhost/arcgis_js_api/library/4.15/dojo/dojo.js/script
/head
bodyh1 idtitle classone这是标题/h1scriptrequire([dojo/dom, dojo/dom-class, dojo/domReady!], function (dom, domClass) {var title dom.byId(title);console.log(domClass.contains(title, one));console.log(domClass.contains(title, two));});/script
/body
/html运行结果如下所示
true
false4、结语
本文主要介绍了Dojo中关于css样式的操作方法。在实际业务中样式的切换和动态修改随处可见Dojo中的dojo/dom-style模块可以帮助开发者轻松实现对dom元素样式的控制。
