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>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" />
<title>demo</title>
<script src="http://localhost/arcgis_js_api/library/4.15/dojo/dojo.js"></script>
</head>
<body>
<h1 id="title" style="color:red;background-color:white;text-align:center;">这是标题</h1>
<script>
require(['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)
center
2.2、设置dom样式——set
set方法主要用来设置dom元素的style，该方法包含三个参数，第一个参数为dom元素，第二个参数为样式名称，第三个参数为样式属性值，下面代码演示了设置<h1>标签中color、background-color、text-align的属性值：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" />
<title>demo</title>
<script src="http://localhost/arcgis_js_api/library/4.15/dojo/dojo.js"></script>
</head>
<body>
<h1 id="title" style="color:red;background-color:white;text-align:center;">这是标题</h1>
<script>
require(['dojo/dom', 'dojo/dom-style', 'dojo/domReady!'], function (dom, domStyle) {
var title = dom.byId('title');
// get
console.log(domStyle.get(title, 'color'));
console.log(domStyle.get(title, 'background-color'));
console.log(domStyle.get(title, 'text-align'));
// set
domStyle.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>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" />
<title>demo</title>
<style>
.one {
color: blue;
}
.two {
background-color: red;
}
</style>
<script src="http://localhost/arcgis_js_api/library/4.15/dojo/dojo.js"></script>
</head>
<body>
<h1 id="title">这是标题</h1>
<script>
require(['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>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" />
<title>demo</title>
<style>
.one {
color: blue;
}
.two {
background-color: red;
}
</style>
<script src="http://localhost/arcgis_js_api/library/4.15/dojo/dojo.js"></script>
</head>
<body>
<h1 id="title" class="one two">这是标题</h1>
<script>
require(['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>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" />
<title>demo</title>
<style>
.one {
color: blue;
}
.two {
color: red;
}
</style>
<script src="http://localhost/arcgis_js_api/library/4.15/dojo/dojo.js"></script>
</head>
<body>
<h1 id="title" class="one">这是标题</h1>
<script>
require(['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>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" />
<title>demo</title>
<style>
.one {
color: red;
}
</style>
<script src="http://localhost/arcgis_js_api/library/4.15/dojo/dojo.js"></script>
</head>
<body>
<h1 id="title" class="one">这是标题</h1>
<div id="div">
<input type="radio" name="a" value="开" checked>开
<input type="radio" name="a" value="关">关
</div>
<script>
require(['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>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" />
<title>demo</title>
<style>
.one {
color: blue;
}
.two {
background-color: red;
}
</style>
<script src="http://localhost/arcgis_js_api/library/4.15/dojo/dojo.js"></script>
</head>
<body>
<h1 id="title" class="one">这是标题</h1>
<script>
require(['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
false
4、结语
本文主要介绍了Dojo中关于css样式的操作方法。在实际业务中，样式的切换和动态修改随处可见，Dojo中的dojo/dom-style模块可以帮助开发者轻松实现对dom元素样式的控制。
