当前位置：首页 > news >正文

ArcGIS API for JavaScript 4.15系列（3）——Dojo中的css样式操作

news 2025/7/7 11:41:50

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');// 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>
<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>