javascript DOM 设置样式

No.内容链接
1Openlayers 【入门教程】 - 【源代码+示例300+】
2Leaflet 【入门教程】 - 【源代码+图文示例 150+】
3Cesium 【入门教程】 - 【源代码+图文示例200+】
4MapboxGL【入门教程】 - 【源代码+图文示例150+】
5前端就业宝典 【面试题+详细答案 1000+】

在这里插入图片描述

文章目录

    • 一、直接操作内联样式
    • 二、通过类名改变样式
    • 三、使用`getComputedStyle`读取计算后的样式
    • 四、注意事项


在JavaScript中操作DOM样式是实现动态页面效果和交互的关键。你可以直接修改元素的内联样式,也可以通过改变类名来应用CSS类样式。以下是详细的说明和示例代码。

一、直接操作内联样式

通过元素的style属性,你可以直接读取或设置内联样式属性。注意,这种方式会覆盖外部CSS样式。

示例代码

// 获取并修改样式
let element = document.getElementById("myElement");
element.style.color = "red"; // 改变颜色
element.style.fontSize = "20px"; // 改变字体大小// 读取样式
let color = element.style.color;
let fontSize = element.style.fontSize;
console.log(color, fontSize);

二、通过类名改变样式

另一种更推荐的方式是通过添加、移除CSS类名来改变元素样式,这样可以更好地利用CSS的层叠加重载机制和缓存。

示例代码

HTML部分:

<style>
.active {color: red;font-size: 20px;
}
</style>

JavaScript部分:

let element = document.getElementById("myElement");// 添加类名
element.classList.add("active");// 移除类名
element.classList.remove("active");// 切换类名(如果存在则移除,否则添加)
element.classList.toggle("active");// 检查是否有某类名
let isActive = element.classList.contains("active");

三、使用getComputedStyle读取计算后的样式

有时,你需要获取经过CSS计算后的样式值,而不是直接的内联样式,这时可以使用window.getComputedStyle

示例代码

let element = document.getElementById("myElement");
let computedStyle = window.getComputedStyle(element);let color = computedStyle.color;
let fontSize = computedStyle.fontSize;
console.log(color, fontSize);

四、注意事项

  • 性能:频繁修改内联样式可能影响性能,尽量使用CSS类名来改变样式。
  • 优先级:直接修改style属性的样式优先级最高,会覆盖外部CSS和内嵌入式样式。
  • 兼容性classList方法在IE10+被支持,对于旧浏览器,需要考虑使用className并手动管理类的添加和移除。
  • 代码可维护性:使用CSS类管理样式,可以使样式和逻辑分离,提高代码的可维护性。

通过上述方法,你可以灵活地控制和管理页面元素的样式,实现丰富的动态效果。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/20224.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

2965. 找出缺失和重复的数字

2965. 找出缺失和重复的数字 题目链接&#xff1a;2965. 找出缺失和重复的数字 代码如下&#xff1a; class Solution { public:vector<int> findMissingAndRepeatedValues(vector<vector<int>>& grid) {vector<int> nums(grid.size()*grid.siz…

C语言| 求1到100之间奇数的平均值.

【分析思路】 第一种方法 直接遍历100个数字&#xff0c;用 i% 1来判断是不是奇数。 i 是奇数&#xff0c;每次相加&#xff0c;并计算个数。 最后直接求平均数average 1.0*sum / count; 第二种方法 设置变量i 1&#xff0c;每次加2&#xff0c;求奇数&#xff0c;并相加…

【易错题】数据统计补充习题(选择题 )#CDA Level 1

本文整理了数据统计相关的易错题&#xff0c;部分可作为备考CDA Level 1统计学部分的补充习题。来源&#xff1a;如荷学题库&#xff08;CFDP第三部分&#xff09; 1&#xff09; 2&#xff09; 3&#xff09; 4&#xff09; 5&#xff09; 6&#xff09; 7&#xff09; 8&…

shopee签名x-sap-ri、x-sap-sec算法还原

最新版签名&#xff0c;免账号登录成功率百分百&#xff0c;需要可d 两种方式base64 MTQzMDY0OTc3OA QXVndXN0MjItZnF4

【项目经理】什么是领导

引言&#xff1a;        项目管理是一个不断发展的领域&#xff0c;它要求项目经理不断学习、适应和创新。通过本系列文章&#xff0c;我们希望能够帮助每一位项目经理提升自己的专业能力&#xff0c;成为引领项目成功的舵手。 持续更新。。。。。。。。。。。。。。。…

第十三章 创建Web客户端 - 用于控制类生成和编译的 SOAP 向导选项

文章目录 第十三章 创建Web客户端 - 用于控制类生成和编译的 SOAP 向导选项用于控制类生成和编译的 SOAP 向导选项为 Web 服务创建客户端创建网络服务编译生成的类Class Type将 %OnDelete 方法添加到类中以便级联删除Proxy Class PackageCreate Business Operation 第十三章 创…

Blueprints - Collision Presets相关

一些以前的学习笔记归档&#xff1b; 在Static Mesh或SkeletalMesh等的属性中&#xff0c;都有Collision Presets&#xff1a; 其中Oject Type只是一个枚举参数&#xff0c;代表设置该Actor为什么类型&#xff0c;Collision Responses代表该Actor对各种类型的Actor有什么反应&a…

DataGrip 数据库连接客户端

I DataGrip 安装 1.1安装 打开dmg镜像&#xff0c;将“DataGrip.app”拖入应用程序中&#xff1b; 1.2 Act 打开应用程序,点击试用模式启动软件&#xff0c;然后将“jetbrains-agent-latest”拖到任意位置&#xff0c;然后拖入&#xff0c;弹出对话框&#xff0c;点击“Rest…

Java web应用性能分析之【压测工具ab】

常用的性能测试工具有&#xff1a;JMeter、loadRunner、ab&#xff1b;对于开发人员来说用的多的是免费的Jmeter和ab&#xff0c;对于测试来说可能用收费的商业软件loadRunner多。在这里我们就说说ab压测工具&#xff0c;因为ab基本满足web接口测试要求&#xff0c;jmeter后面再…

LabVIEW车体静强度试验台测控系统

LabVIEW车体静强度试验台测控系统 开发了一种基于LabVIEW的车体静强度试验台测控系统&#xff0c;通过自动化技术提高试验的精度和效率。系统采用LabVIEW软件与S7-200 SMART PLC硬件平台相结合&#xff0c;实现了对液压缸作用力的精确控制和试验数据的实时采集及管理。 传统的…

PyTorch 的 torch.nn 模块学习

torch.nn 是 PyTorch 中专门用于构建和训练神经网络的模块。它的整体架构分为几个主要部分&#xff0c;每部分的原理、要点和使用场景如下&#xff1a; 1. nn.Module 原理和要点&#xff1a;nn.Module 是所有神经网络组件的基类。任何神经网络模型都应该继承 nn.Module&#…

compare_exchange 基本使用

参考博客&#xff1a;C内存模型 compare_exchange_weak基本使用 bool compare_exchange_weak( T& expected, T desired,std::memory_order success,std::memory_order failure );expected:期望的值desired 想要写入的值 如果obj和期望的值相同&#xff0c;则写入desired并…

如何培养技术人员的管理能力?

随着企业发展的需求不断增长&#xff0c;对于一专多能的复合型人才的需求也日益增加。这种人才既拥有技术实力&#xff0c;又具备出色的管理能力。尤其对于高新技术企业而言&#xff0c;技术骨干往往更有机会成为管理人员。一方面是因为技术骨干在自己的岗位上展现出了核心技术…

「C系列」C 简介

文章目录 一、C 简介1. C语言的主要特点&#xff1a;2. C语言的应用领域&#xff1a;3. 学习C语言的建议&#xff1a; 二、C 环境设置、编辑器1. C环境设置2. 编辑器选择3. 总结 三、C第一个案例四、相关链接 一、C 简介 C语言是一种通用的、过程式的计算机编程语言&#xff0…

通用代码生成器应用场景四,跨编程语言翻译

通用代码生成器应用场景四&#xff0c;跨编程语言翻译 如果您有一个Java工程&#xff0c;想把它移植到Rust或Golang语言中去&#xff0c;希望尽可能加快研发速度。 如果您的系统是通用代码生成器开发的&#xff0c;保留了系统的SGS源文件或者SGS2的Excel模板&#xff0c;您可…

探索未来电商视觉革命:Doly,AI驱动的3D产品宣传短片一键生成器

在数字化营销日新月异的今天,产品展示的视觉冲击力已成为电商平台吸引消费者的关键。Doly,由法国创新先驱AniML匠心打造,正引领一场AI与3D技术融合的电商内容创新风暴,让每一位电商卖家都能轻松拥有好莱坞级别的产品宣传短片,只需简单几步,即可在激烈的市场竞争中脱颖而出…

结构体 基础知识

本笔记为观看64 结构体-结构体定义和使用_哔哩哔哩_bilibili 的学习笔记 1.结构体概念 结构体属于用户自定义的数据类型&#xff0c;允许用户存储不同的数据类型。 2.结构体定义和使用 ​ 结构体定义 ​ 通过结构体创建变量的方式 2.1 Struct 结构体名 变量名 ​ 2…

Springboot 开发 -- 跨域问题技术详解

一、跨域的概念 跨域访问问题指的是在客户端浏览器中&#xff0c;由于安全策略的限制&#xff0c;不允许从一个源&#xff08;域名、协议、端口&#xff09;直接访问另一个源的资源。当浏览器发起一个跨域请求时&#xff0c;会被浏览器拦截&#xff0c;并阻止数据的传输。 这…

【算法】MT2 棋子翻转

✨题目链接&#xff1a; MT2 棋子翻转 ✨题目描述 在 4x4 的棋盘上摆满了黑白棋子&#xff0c;黑白两色棋子的位置和数目随机&#xff0c;其中0代表白色&#xff0c;1代表黑色&#xff1b;左上角坐标为 (1,1) &#xff0c;右下角坐标为 (4,4) 。 现在依次有一些翻转操作&#…

“迎七一、学党史、祭英烈”活动在孙善师孙善帅烈士故居启动

临沂信息联播讯&#xff08;张春兄、冯爱云&#xff09; 5月30日&#xff0c;山东省著名烈士孙善师孙善帅故居迎来了山东全味时间企业管理咨询服务有限公司、志林丽虹沂蒙文化传播&#xff08;临沂&#xff09;有限公司、山东志林搏击健身有限公司的参观团队&#xff0c;标志着…