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

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

1、前言

前一篇博客介绍了Dojo中基础的dom操作方法,主要是针对html中的常用标签和属性进行操作。而一个优秀的线上网站自然也离不开css样式的从旁辅助。在实际开发过程中,我们经常会遇到需要动态修改css样式的问题,本文就来介绍一下如何在Dojo中对dom元素的css样式进行操作。

2、dojo/dom-style模块

Dojo中内置的dojo/dom-style模块可帮助开发者轻松实现对css样式的控制,该模块主要包含getset两个方法。

2.1、获取dom样式——get

get方法主要用来获取dom元素的style,该方法包含两个参数,第一个参数为dom元素,第二个参数为样式名称,下面代码演示了获取<h1>标签中colorbackground-colortext-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>标签中colorbackground-colortext-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模块包含的功能更加丰富,主要有addcontainsremovereplacetoggle等方法。

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元素样式的控制。

相关文章:

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

1、前言 前一篇博客介绍了Dojo中基础的dom操作方法&#xff0c;主要是针对html中的常用标签和属性进行操作。而一个优秀的线上网站自然也离不开css样式的从旁辅助。在实际开发过程中&#xff0c;我们经常会遇到需要动态修改css样式的问题&#xff0c;本文就来介绍一下如何在Do…...

“赶快回家网”首页制作

“赶快回家网”首页制作一、实验名称&#xff1a;二、实验日期&#xff1a;三、实验目的&#xff1a;四、实验内容&#xff1a;五、实验步骤&#xff1a;六、实验结果&#xff1a;七、源程序&#xff1a;八、心得体会&#xff1a;一、实验名称&#xff1a; “赶快回家网”首页…...

JavaWEB-Servlet

目录 Servlet简介Servlet快速入门Servlet配置详解ServletContext 1 Servlet简介 Servlet 运行在服务端的Java小程序&#xff0c;是sun公司提供一套规范&#xff08;接口&#xff09;&#xff0c;用来处理客户端请求、响应给浏览器的动态资源。但servlet的实质就是java代码&a…...

springboot集成mqtt

引入jar包 <dependency><groupId>org.springframework.integration</groupId><artifactId>spring-integration-mqtt</artifactId> </dependency> <dependency><groupId>com.alibaba</groupId><artifactId>fastjs…...

Lecture3 梯度下降(Gradient Descent)

目录 1 问题背景 2 批量梯度下降 (Batch Gradient Descent) 3 鞍点(Saddle Point) 3 随机梯度下降 (Stochastic Gradient Descent) 4 小批量梯度下降 (Mini-batch Gradient Descent) 1 问题背景 图1 上节课讲述的穷举法求最优权重值在Lecture2中&#xff0c;介绍了使用穷举…...

深入了解DSP

一、时钟和电源 问&#xff1a;DSP的电源设计和时钟设计应该特别注意哪些方面&#xff1f;外接晶振选用有源的好还是无源的好&#xff1f; 答&#xff1a;时钟一般使用晶体&#xff0c;电源可用TI的配套电源。外接晶振用无源的好。 问&#xff1a;TMS320LF2407的A/D转换精度保证…...

Flink反压如何排查

Flink反压利用了网络传输和动态限流。Flink的任务的组成由流和算子组成&#xff0c;那么流中的数据在算子之间转换的时候&#xff0c;会放入分布式的阻塞队列中。当消费者的阻塞队列满的时候&#xff0c;则会降低生产者的处理速度。 如上图所示&#xff0c;当Task C 的数据处…...

windows无法访问指定设备路径或文件怎么办?2个解决方案

有时候Win10电脑打不开程序或文件&#xff0c;windows无法访问指定设备路径或文件该怎么办&#xff1f;原因是什么呢&#xff1f;一般导致这种情况的出现&#xff0c;大多是因为我们的电脑缺乏相应的查看权限&#xff0c;我们只需要通过赋予权限就可以解决这个难题了。 操作环境…...

冷知识|鹤顶红还能用来修长城?

大家好&#xff0c;我是建模助手。 在上篇浅浅地蹭了波热点之后&#xff0c;我灵机一动&#xff0c;倒不如也搞一搞建筑方面的冷知识&#xff1f;冷热搭配&#xff0c;事半功倍... 问问大家&#xff0c;如果谈起古建筑&#xff0c;关键词都有什么&#xff1f;是庄严、震撼、壮…...

【GD32F427开发板试用】在IAR环境中移植RTX5

本篇文章来自极术社区与兆易创新组织的GD32F427开发板评测活动&#xff0c;更多开发板试用活动请关注极术社区网站。作者&#xff1a;吴金刚 0.前言 首先感谢极术社区和兆易创新给了这次试用GD32F427开发板的机会。 板子做的虽然简约&#xff0c;但是自带了GD-link所以一根USB…...

MySQl学习(从入门到精通15)

MySQl学习&#xff08;从入门到精通15&#xff09;第 18 章_MySQL 8 其它新特性1. MySQL 8 新特性概述1. 1 MySQL 8. 0 新增特性1. 2 MySQL 8. 0 移除的旧特性2. 新特性 1 &#xff1a;窗口函数2. 1 使用窗口函数前后对比2. 2 窗口函数分类2. 3 语法结构2. 4 分类讲解1. 序号函…...

前端构建工具 Vite

文章目录参考环境构建工具构建工具的主要功能目前主流的前端构建工具Vite为什么使用 Vite冷启动WebpackVite热更新优化热更新优化预构建依赖Webpack VS ViteVite 的缺点首屏性能懒加载与 Vite 相关的基本操作获取create-vite创建项目Project nameSelect a frameworkSelect a va…...

若依框架---PageHelper分页(十)

在前几天的文章中&#xff0c;我们介绍了PageHelper的分页方法&#xff0c;研读代码定位到了ExecutorUtil.pageQuery(...)方法&#xff0c;并阅读到了其中的部分代码。 今天我们将看到重要的SQL修改代码。 getPageSql 我们接着看代码&#xff1a; if (!dialect.beforePage(…...

苹果手机专用蓝牙耳机有哪些?与iphone兼容性好的蓝牙耳机

蓝牙耳机摆脱了线缆的束缚&#xff0c;在地以各种方式轻松通话。自从蓝牙耳机问世以来&#xff0c;一直是行动商务族提升效率的好工具&#xff0c;苹果产品一直都是受欢迎的数码产品&#xff0c;下面推荐几款与iphone兼容性好的蓝牙耳机。 第一款&#xff1a;南卡小音舱蓝牙耳…...

CS-TPGS;壳聚糖修饰维生素E;Chitosan-g-TPGS

Chitosan-g-TPGS,CS-TPGS壳聚糖修饰维生素E聚乙二醇1000琥珀酸酯外观呈现白色固体或者粘稠液体。长期保存需要在-20℃,避光,干燥条件下存放&#xff0c;注意取用一定要干燥,避免频繁溶冻。 维生素E聚乙二醇琥珀酸酯(简称TPGS)是维生素E的水溶性衍生物,由维生素E琥珀酸酯的羧基与…...

easyx的基本使用(万字解析)

easyx的基本使用一.基本框架1.创建文件2.创建窗体-initgraph,closegraph,getchar二.简单的绘制1.圆形-circle2.坐标系统-setorigin,setaspectratio三.简单图形1.绘制点-putpixel2.简单的直线-line3.矩形-rectangle4.椭圆-ellipse5.圆角矩形-roundrect6.扇形-pie7.圆弧-arc四.多…...

基于OpenCV 的车牌识别

基于OpenCV 的车牌识别 车牌识别是一种图像处理技术&#xff0c;用于识别不同车辆。这项技术被广泛用于各种安全检测中。现在让我一起基于 OpenCV 编写 Python 代码来完成这一任务。 车牌识别的相关步骤 1. 车牌检测&#xff1a;第一步是从汽车上检测车牌所在位置。我们将使用…...

C#【必备技能篇】Winform跨线程更新进度条的实例

文章目录实例一&#xff1a;【方便理解&#xff0c;常用&#xff01;】源码&#xff1a;运行效果&#xff1a;实例二&#xff1a;【重在理解代码本身】源码&#xff1a;运行效果&#xff1a;参考&#xff1a;实例一&#xff1a;【方便理解&#xff0c;常用&#xff01;】 跨线…...

(1分钟速通面试) 矩阵分解相关内容

矩阵分解算法--总结QR分解 LU分解本篇博客总结一下QR分解和LU分解&#xff0c;这些都是矩阵加速的操作&#xff0c;在slam里面还算是比较常用的内容&#xff0c;这个地方在isam的部分出现过。(当然isam也是一个坑&#xff0c;想要出点创新成果的话 可能是不太现实的 短期来讲 哈…...

this指向

&#xff08;1&#xff09;在全局环境中的this——window 无论是否在严格模式下&#xff0c;在全局执行环境中&#xff08;在任何函数体外部&#xff09;this 都指向全局对象。 "use strict"console.log(this); //windowconsole.log(thiswindow);//true &#xff08…...

【大模型RAG】拍照搜题技术架构速览:三层管道、两级检索、兜底大模型

摘要 拍照搜题系统采用“三层管道&#xff08;多模态 OCR → 语义检索 → 答案渲染&#xff09;、两级检索&#xff08;倒排 BM25 向量 HNSW&#xff09;并以大语言模型兜底”的整体框架&#xff1a; 多模态 OCR 层 将题目图片经过超分、去噪、倾斜校正后&#xff0c;分别用…...

React Native在HarmonyOS 5.0阅读类应用开发中的实践

一、技术选型背景 随着HarmonyOS 5.0对Web兼容层的增强&#xff0c;React Native作为跨平台框架可通过重新编译ArkTS组件实现85%以上的代码复用率。阅读类应用具有UI复杂度低、数据流清晰的特点。 二、核心实现方案 1. 环境配置 &#xff08;1&#xff09;使用React Native…...

Spring Boot面试题精选汇总

&#x1f91f;致敬读者 &#x1f7e9;感谢阅读&#x1f7e6;笑口常开&#x1f7ea;生日快乐⬛早点睡觉 &#x1f4d8;博主相关 &#x1f7e7;博主信息&#x1f7e8;博客首页&#x1f7eb;专栏推荐&#x1f7e5;活动信息 文章目录 Spring Boot面试题精选汇总⚙️ **一、核心概…...

vue3 定时器-定义全局方法 vue+ts

1.创建ts文件 路径&#xff1a;src/utils/timer.ts 完整代码&#xff1a; import { onUnmounted } from vuetype TimerCallback (...args: any[]) > voidexport function useGlobalTimer() {const timers: Map<number, NodeJS.Timeout> new Map()// 创建定时器con…...

html css js网页制作成品——HTML+CSS榴莲商城网页设计(4页)附源码

目录 一、&#x1f468;‍&#x1f393;网站题目 二、✍️网站描述 三、&#x1f4da;网站介绍 四、&#x1f310;网站效果 五、&#x1fa93; 代码实现 &#x1f9f1;HTML 六、&#x1f947; 如何让学习不再盲目 七、&#x1f381;更多干货 一、&#x1f468;‍&#x1f…...

代码随想录刷题day30

1、零钱兑换II 给你一个整数数组 coins 表示不同面额的硬币&#xff0c;另给一个整数 amount 表示总金额。 请你计算并返回可以凑成总金额的硬币组合数。如果任何硬币组合都无法凑出总金额&#xff0c;返回 0 。 假设每一种面额的硬币有无限个。 题目数据保证结果符合 32 位带…...

Go 语言并发编程基础:无缓冲与有缓冲通道

在上一章节中&#xff0c;我们了解了 Channel 的基本用法。本章将重点分析 Go 中通道的两种类型 —— 无缓冲通道与有缓冲通道&#xff0c;它们在并发编程中各具特点和应用场景。 一、通道的基本分类 类型定义形式特点无缓冲通道make(chan T)发送和接收都必须准备好&#xff0…...

JavaScript基础-API 和 Web API

在学习JavaScript的过程中&#xff0c;理解API&#xff08;应用程序接口&#xff09;和Web API的概念及其应用是非常重要的。这些工具极大地扩展了JavaScript的功能&#xff0c;使得开发者能够创建出功能丰富、交互性强的Web应用程序。本文将深入探讨JavaScript中的API与Web AP…...

Mysql8 忘记密码重置,以及问题解决

1.使用免密登录 找到配置MySQL文件&#xff0c;我的文件路径是/etc/mysql/my.cnf&#xff0c;有的人的是/etc/mysql/mysql.cnf 在里最后加入 skip-grant-tables重启MySQL服务 service mysql restartShutting down MySQL… SUCCESS! Starting MySQL… SUCCESS! 重启成功 2.登…...

快刀集(1): 一刀斩断视频片头广告

一刀流&#xff1a;用一个简单脚本&#xff0c;秒杀视频片头广告&#xff0c;还你清爽观影体验。 1. 引子 作为一个爱生活、爱学习、爱收藏高清资源的老码农&#xff0c;平时写代码之余看看电影、补补片&#xff0c;是再正常不过的事。 电影嘛&#xff0c;要沉浸&#xff0c;…...