DOM节点添加样式

原创已于 2022-02-09 09:11:36 修改 · 1.9k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#css #html #css3 #前端 #jquery

于 2022-01-22 15:45:17 首次发布

前端同时被 3 个专栏收录

11 篇文章

订阅专栏

Html

9 篇文章

订阅专栏

JavaScript

6 篇文章

订阅专栏

问题还原：

**
利用XLSX插件中的XLSX.utils.sheet_to_html()方法将从后台接收到的Excel转成HTML后，由于没有样式，所以通过id、tagName获取对应的td节点后，根据行数增加对应的CSS样式。

解决方案：

获取到DOM节点后，遍历时，使用element.classList.add(‘myClass’)添加样式。
使用element.classList.remove(‘myClass’)删除样式。其他JS自带实现方式后期使用时再补充。
注：myClass是写好的css样式。

PS：欢迎大家点赞、关注、支持。如有需要，欢迎添加博主QQ沟通交流！QQ：156587607

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

心知向之

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

javascript将DOM节点添加到文档的方法实例分析

10-23

在JavaScript中，将DOM节点添加到文档是一项基础且重要的操作。本文将介绍如何通过JavaScript将DOM节点添加到文档，并且通过实例分析不同的方法及其性能表现。首先，我们来了解一下什么是DOM。DOM是文档对象模型...

JavaScript DOM节点添加示例

10-25

JavaScript DOM节点添加是指在使用JavaScript操作网页DOM（文档对象模型）时，向页面文档中动态添加新的节点元素。DOM是一种以树形结构表示HTML文档的编程接口，它允许JavaScript访问和修改HTML的结构、样式和内容。...

参与评论您还未登录，请先登录后发表或查看评论

DOM的节点插入简单样式

weixin_44552244的博客

01-18

835

作者：郑名方本次任务完成时间：2019年1月 17日～2019年1月 18日开发工具与关键技术：Visual Studio || DOM 插入样式完成模块功能：添加、删除一、下面我们来看一个例子，通过DOM 内部插入append()与appendTo()的方法，还可以从jQuery提供的方法是prepend()与prependTo() 二、因为知道append()$("#qwerty"...

使用dom添加样式

2201_75359473的博客

06-29

945

querySelector只获取遇到的第一个元素，querySelectorALL获取全部，也是输出数组。DOM：文档对象模型（Document Object Model）,将页面所有的内容表示为可以修改的对象；html元素： <html>= document.documentElement。通过浏览器提供给我们的DOM API，我们可以对元素以及其中的内容做任何事情。它是DOM的入口点，可以从document开始去访问任何节点元素；对DOM的所有操作都是从 document 对象开始的；

DOM设置CSS样式的三种方法

m0_53911539的博客

01-10

1308

外部样式表：通过标签引入一个外部css文件内部样式表：将css代码放在内联样式：将css样式直接定义在 HTML 元素内部

js--Dom(四) 样式+节点操作

司天宏的博客

01-15

1350

样式操作—获取和设置样式 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &l

JavaScript进阶部分之DOM操作（节点获取，节点属性修改，节点创建与插入，CSS样式的修改）

sususugaa的博客

11-03

1166

DOM是document object model（文档对象模型）的缩写。它是一种与平台、语言无关的接口，允许程序动态地访问或更新HTML、XML文档的内容、结构和样式，且提供了一系列的函数和对象来实现增、删、改、查操作。可以这么理解，DOM操作就是为了用JS程序代替人工直接修改HTML和CSS代码。

JS实现DOM节点插入操作之子节点与兄弟节点插入操作示例

10-18

知识点1：DOM节点的分类在DOM中，节点可以是不同类型的实体，例如元素节点、文本节点或属性节点。元素节点表示HTML文档中的标签，文本节点包含标签之间的文本，而属性节点则表示标签内的属性。知识点2：创建DOM...

javascript将DOM节点添加到文档的方法实例分析.docx

01-13

本文将深入探讨如何使用JavaScript将DOM节点添加到文档中的两种方法，并通过实例进行分析。首先，我们要理解DOM的基本概念。DOM是一种标准，它将网页视为一个由元素、属性和文本组成的树形结构。每个元素、属性和...

jquery 获取dom固定元素添加样式的简单实例

10-26

本文将介绍如何使用jQuery来获取DOM中的固定元素，并为它们添加样式。首先，我们需要了解什么是DOM。DOM是文档对象模型（Document Object Model）的缩写，它是一种与平台和语言无关的接口，允许程序和脚本动态地...

javascript为DOM元素设置样式

bboyjoe的博客

07-20

3917

上海远地资产管理有限公司 p{ border:medium double black; background-color: lightgray; } #block1{ color: white; } tabl

为DOM节点添加或者删除class

weixin_30569033的博客

06-12

881

项目中如果应用了常用的javascript类库，多数情况下，这些已经封装好的类库，都会封装一个类似于addClass和removeClass的方法，以便于我们对DOM节点的class进行操作。以jQuery为例： $(dom).addClass("a").removeClass("b"); 由于是封装好的方法，我们甚至都不需要检查需要操作的class在DOM中是否存在，用起来的...

JavaScript 中给节点添加样式的方法

travelhenry的专栏

02-27

568

正确写法：document.querySelector(".test").classList.add("selected");错误写法：document.querySelector(".test").addClass("selected");比如给一个class="test"的节点添加selected的类名，

js - DOM操作 - 添加样式的三种方法

m0_74417967的博客

06-29

6119

第一种方法有一个问题就是一不小心容易覆盖元素以前就已经绑定了的样式。第一种方法是最笨重的方法，只适合修改小的样式。注意类名前面不要加点。注意类名前面不要加点。

DOM编程之：节点操作和样式

LYQ2332826438的博客

08-12

712

DOM编程之：节点操作和样式一、换图片 var im=document.getElementById("idd"); im.setAttribute("src","a2.jpg"); //src为<img>的属性，a2.jpg是要替换的新值。 im.src="a2.jpg"; 几张图片循环播放： int i=1; //全局变量 function mya(){ ...

给html添加类名的方法,DOM元素类名操作

weixin_36182916的博客

06-19

2096

类名操作是前端工程师编码过程中最频繁的操作之一，关于类名的操作基本可以总结为以下四种：addClass: 为指定的dom元素添加样式removeClass: 删除指定dom元素的样式toggleClass: 如果存在(不存在)，就删除(添加)一个样式hasClass: 判断样式是否存在jQuery最简单的方式当然是直接引入万能的jQuery。jQuery中有addClass(),removeCla...

javascript学习-DOM设置元素的样式

qq_43368682的博客

07-21

5153

DOM设置元素的样式 1、通过style属性设置修改样式【注！】此方式是直接设置标签的style属性，设置完后，优先级最高 <div id="d1"> helloworld </div> <script type="text/javascript"> //1通过style属性设置修改样式 var d1=document.querySelector('#d1') console.log([d1]) d1.style.wid

vue 和 js 获取 dom节点下的某个元素，然后设置样式

weixin_42097439的博客

09-02

1917

vue获取dom节点下的类名，然后修改样式 <div ref="divRef"> <div class="a">提到岁月，你们总说它是长河，流得头也不回。</div> <div class="a">少不更事的年纪，我也用过老成口气，念过孔夫子的，逝者如斯乎，不舍昼夜。</div> <div class="b">而今扭头过去看，才觉得如此可笑。</div> <div class="d">如果没有你的话，那些

DOM操作class与style

m0_67212141的博客

12-12

1358

快来学习吧，原创不易，多多支持呀！每篇都是干货!

js给DOM节点设置样式

最新发布

03-27

<think>好的，用户想了解如何通过JavaScript设置DOM节点的样式。首先，我需要回忆一下相关的知识，并结合提供的引用内容来组织答案。根据引用[3]和[4]，设置样式可以通过直接操作元素的style属性来实现。例如，element.style.color = 'red'。此外，还可以使用setProperty方法，如element.style.setProperty('font-size', '30px')。需要注意的是，CSS属性名如果是驼峰式写法，比如fontSize，或者用字符串形式，比如'font-size'。另外，引用[5]提到了创建新节点并设置属性，这可能与动态添加样式有关，但用户的问题主要集中在设置样式上，所以这部分可能暂时不需要深入。用户可能需要知道不同的方法，比如直接修改style属性、使用cssText批量设置，或者操作class类名来应用预定义的样式。引用[4]中使用了getElementsByClassName获取元素后修改样式，这说明也可以通过类名来定位元素并设置样式。还需要考虑性能问题，比如多次修改样式是否会导致重排，是否应该使用classList来添加或移除类而不是直接修改style。不过根据提供的引用，可能没有涉及这方面的内容，但可以简要提及。另外，引用[1]提到JQuery的css方法，但用户明确询问的是JavaScript原生方法，所以不需要涉及JQuery，但可以对比说明。总结一下，回答的结构应该包括： 1. 直接操作style属性：单个样式设置，使用驼峰或setProperty。 2. 使用cssText批量设置多个样式。 3. 通过修改class类名来应用样式。 4. 动态添加或移除样式表（高级用法，可能引用中没有，但可以补充）。需要确保每个方法都有示例代码，并引用对应的引用来源。例如，引用[3]和[4]提供了直接设置style属性的例子，而引用[5]涉及创建节点，可能不直接相关。此外，用户可能想知道不同方法的适用场景，比如直接修改style适用于动态样式，而修改class更适合应用多个样式。同时，要注意样式的优先级，内联样式（即style属性）的优先级较高。最后，生成相关问题，比如如何获取样式、如何批量修改、如何切换类名等。</think>### 如何通过JavaScript设置DOM节点样式？ #### 1. **直接修改元素的`style`属性** 这是最直接的方法，适用于动态设置单个样式属性。 - **语法格式**：`element.style.属性名 = "值"`（属性名使用驼峰命名，如`fontSize`） - **示例**： ```javascript const element = document.getElementById('myElement'); element.style.color = 'blue'; // 设置文字颜色 element.style.backgroundColor = '#eee'; // 设置背景颜色 element.style.fontSize = '20px'; // 设置字体大小 ``` 或使用`setProperty`方法（支持原始CSS属性名）[^3]： ```javascript element.style.setProperty('font-size', '30px'); element.style.setProperty('border', '1px solid red'); ``` #### 2. **批量设置多个样式：`cssText`** 通过`cssText`一次性设置多个样式属性，适用于需要修改多个样式的场景[^4]： ```javascript element.style.cssText = 'color: red; background: yellow; font-size: 16px;'; // 注意：这会覆盖原有内联样式！ ``` #### 3. **通过修改`class`类名** 通过添加/移除预定义的CSS类批量应用样式，适合复用样式或复杂场景： ```javascript element.classList.add('active'); // 添加类 element.classList.remove('inactive'); // 移除类 element.classList.toggle('highlight'); // 切换类 ``` 对应的CSS定义： ```css .active { color: white; background: green; } .highlight { border: 2px dashed orange; } ``` #### 4. **动态创建或修改样式表** 通过操作`<style>`标签或`CSSStyleSheet`对象全局修改样式（高级用法）： ```javascript const style = document.createElement('style'); style.innerHTML = '.dynamic-style { padding: 10px; }'; document.head.appendChild(style); // 将类应用到元素 element.classList.add('dynamic-style'); ``` --- ### 注意事项 - **优先级**：通过`style`属性设置的样式是内联样式，优先级高于外部CSS（除非使用`!important`）。 - **性能**：频繁修改`style`可能导致多次重绘，建议批量操作或使用`class`切换。 - **兼容性**：`classList`在IE10+支持，老旧项目需用`className`字符串操作替代。 ---