js给div加样式用class

在JavaScript中，给<div>元素添加样式可以通过使用class属性来实现。这种方式通常与CSS结合使用，以实现样式的模块化和复用。以下是基础概念以及如何操作的详细解释：

基础概念

CSS类（Class）：在CSS中，类是一种选择器，用于定义一组样式规则，这些规则可以应用于一个或多个HTML元素。
JavaScript DOM操作：JavaScript可以通过文档对象模型（DOM）来修改HTML元素的内容和样式。

类型与应用场景

通用类：适用于多个元素的通用样式。
特定类：为特定元素或特定情境下的元素设计的样式。
动态类：根据JavaScript逻辑动态添加或移除的类，用于实现交互效果。

示例代码

假设我们有一个CSS类定义如下：

.highlight {
  background-color: yellow;
  font-weight: bold;
}

我们可以使用JavaScript来给<div>元素添加这个类：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.highlight {
  background-color: yellow;
  font-weight: bold;
}
</style>
</head>
<body>

<div id="myDiv">这是一个div元素。</div>

<script>
// 获取div元素
var divElement = document.getElementById('myDiv');

// 添加class
divElement.classList.add('highlight');
</script>

</body>
</html>

遇到的问题及解决方法

问题：为什么添加了类之后样式没有变化？

原因：

CSS文件未正确链接到HTML文件。
类名拼写错误或不存在于CSS中。
JavaScript代码执行顺序问题，可能在DOM元素加载完成之前执行了添加类的操作。

解决方法：

确保CSS文件路径正确，并且在HTML中正确引用。
检查类名是否与CSS中的定义完全一致。
使用window.onload或DOMContentLoaded事件确保DOM完全加载后再执行JavaScript代码。

window.onload = function() {
  var divElement = document.getElementById('myDiv');
  divElement.classList.add('highlight');
};

通过这种方式，可以确保在尝试修改DOM之前，页面的所有元素都已经加载完毕。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

div:给div加滚动条　div的滚动条设置

今天做了个例子： div 的滚动条问题：两种方法：一、 div style=” overflow:scroll; width:400px; height:400px;”>div> 记住宽和高一定要设置噢...，否则不成的不过在不超出时，会有下面的滚动条，所以不是最好的选择二、 div style=” overflow-y:auto; overflow-x:auto; width:400px; height...:400px;”>div> 记住宽和高一定要设置噢，否则不成的这样比较好的是，在宽和高不超出时，只是一条线三、说明直接为div指定overflow属性为auto即可，但是必须指定div的高度，...如下： div style=”position:absolute; height:400px; overflow:auto”> div> 如果要出现水平滚动条，则： overflow-x:auto...同理，垂直滚动条为： overflow-y:auto 如果该div被包含在其他对象例如td中，则位置可设为相对：position:relative 发布者：全栈程序员栈长，转载请注明出处：https:

6.1K3 0

JS示例05-style行间样式和class属性样式

一、知识要点 1、行间样式优先级高于class属性样式（设置过行间样式后，再设置属性样式则无效） 2、对同一个元素只采用一种属性控制方式（要不是行间样式，要不是class样式），不要混用二、源码参考...html> #div1...div1.style.background = 'red'; // 行间样式 } btn2.onclick = function() {...div1.className = 'boxgreen'; // class样式 } }...id="div1"> div> 三、运行效果 ?

9.9K2 0

js 动态生成div 并添加class id 原

var i=1;i<6;i++) { var testa=document.createElement("a"); 　　var testDv=document.createElement("div..."); var h3Dv=document.createElement("h3"); var divcontent=document.createElement("div"); var... divcanvas=document.createElement("div"); var canvasDv=document.createElement("canvas"); var pNode

15K2 0

JS 获取所有相同class的div，并遍历

Again，这个问题对于使用mvvm框架，例如vue，weex和angular 是任何难度的因为他们的dom都是直接用js生成控制的，在生成之初就直接处理好久好了。...但是对于普通的js来说，这就很麻烦了。...不过很好，JQuery已经帮我们集成了一个方法.each() 例如你想要遍历class为rffanlab的那么你可以这么做 $(".rffanlab").each(function(){ // do

14K2 0

Js传对象数组样式给后台

function createCalendar(date_list1, month000) { // var date_list = res.dat...

5.8K2 0

原生JS给可编辑DIV添加文字阴影

给大家分享一个用原生JS给可编辑DIV添加文字阴影的特效，效果如下：以下是代码实现，欢迎大家复制粘贴和收藏。原生JS...给可编辑DIV添加文字阴影 * { margin: 0; padding: 0;...: center; text-shadow: 1px 1px 0px #01d1d3; } div...id="text" contenteditable>Long Shadowdiv> let text = document.getElementById(

11.5K4 0

数组each遍历渲染如何给第一个div添加class

数组each遍历渲染如何给第一个div添加class 并且在点击每个div的时候，有被选中的效果其他div背景颜色移除被点击的div背景颜色添加。 js/bootstrap.min.js"...> /* 楼层条样式 */ .floorBar { position:...class="floorBar">div> $.ajax({...onclick="updata2dTile()" class="floorinside">F' + item + 'div>'; });

1.5K1 0

今日作业 -- 用js控制DIV的显示隐藏

这个题很简单的，就是用一个按钮切换二个菜单的显示和隐藏。比昨晚的查找重复字符串要简单的多。...参与写作业的同学们基本都写的不错，思路也都OK，用原生JS，jQuery，ES6都可以，，暴露出来的问题主要有二个，一是DOM查找的效率问题，这个大家自己其实都懂，我就提一下不多说了哈，，二是判断条件的选择...，就是用什么来做为if的判断条件，我个人觉得以下这种用字符串来判断，应该是不太OK的。。

17.1K6 0

用js实现一个div弹出图层

用js实现一个弹出图层，具体效果：点击按钮后弹出图层，图层处于页面中间、带有阴影的圆角边框、图层中有input、提交按钮、关闭按钮、标题，弹出后背景页面不可点击、背景变灰。...class="overlay" id="overlay"> div class="popup"> 弹出图层提交 div class="close" id="close-popup">×div> div> div> <script...overlay.style.display = "none"; document.body.style.overflow = "auto"; } 该代码使用了CSS样式...如果想隐藏JS功能逻辑，可用JShaman对JS代码进行混淆加密，加密后的代码是密文状态，不可读、不可分析。

7.4K5 0

给 Javascript 加上面向对象的属性：Class.js

JavaScript 默认是没有 class 的语法，Class.js 通过不到 1K 的代码给 JavaScript 语言提供一个基本的类的结构。...function(val){ this.message = val; }, get:function(){ alert(this.message); } }; 使用创建的类 var e = new Class...function(val){ this.message = val; }, get:function(){ alert(this.message); } }; 用法： var e = new Class...() 函数可以扩展现有的类： Two = Extend(One,{ construct:function(val){ this.set(val); } }); 用法： var e = new Class

3.3K2 0

页面加载时给的子元素的第一个元素加class

HTML代码： div id="xiao"> div> js

1K3 0

第4天：JS入门-给div设置宽高背景色

今天学习了js入门课程，听的不多，做了个小练习，给div设置宽高、背景色。一点点都是进步。核心代码如下： JS入门_设置div宽、高、背景色请为下面的DIV设置样式：点击设置 div> div id="box">div> div...span id="height1">200300400 class...="btn1">恢复 class="btn2">确定 div> 运行效果： ?

3.9K1 0

用原生js给网站写个搜索功能

本文也算是一篇教程，可以给 hugo 网站加个搜索功能，并且实现热更新，体验感更好。...2. js代码在 /layouts/_default 新建一个模板文件 search.html，大致的结构参考其他模板文件，然后写入我们需要的内容。...首先是一个简单的 html 结构，给input绑定一个事件。...class="search"> <input type="text" id="searchTerm" name="searchTerm" autocomplete="off" oninput...--- slug: search title: 搜索 layout: search --- 写了一个基础的样式，可以直接使用。

3504 0

给博客园加一个会动的小人-spig.js

给博客园加一个会动的小人-spig.js 效果大概是这样，感觉十分可爱qvq ? ? 那么怎么添加呢？首先需要开通js/html权限。...然后在页脚html代码中加入以下代码 js的地址,代码在下面"> div id="spig" class="spig"> div id="message">……div> div id="mumu" class...="mumu">div> div> var isindex=true; var title=""; var visitor="这位怪蜀黍...顺便吐槽一句，原作者给的api都挂的差不多了，然鹅我是个js菜鸡连get/post都不会，所以凑合着改了一下api，欢迎各位大佬给出更好的解决方案qwq //右键菜单 jQuery(document).

3.8K2 1

react给一个div行内加背景图片并实现cover覆盖模式居中显示

这里注意，如果简写里要写background-size，则这里必须写 / ,否则整个背景图片样式没有解析出来。它和font以及border-radius里简写方式使用的/用法相似。...div style={{ display: 'inline-block', width:...background: `url("${thumb[0]}") center center / cover no-repeat`, }}> div...代码解析之后样式：（即使顺序不是这样写的解析出来也是这样的） ? ...如果分开写background其他设置，会出现一个问题，就是第一次加载图片是cover覆盖的，no-repeat，center center，但是打开其他页面再回来这些样式就都不生效了，只剩一个背景图片了

3.8K2 0

用 Python 给自己的头像加一个小国旗（小月饼）

今天是国庆节也是中秋节，首先祝大家节日快乐，本文我们使用 Python 来给自己的头像加一个小国旗或小月饼。...月饼对于月饼，同样的也可以用 Python 来画一个，月饼组成元素主要包括：外层圆形的花纹轮廓、内层轮廓和文字。...给头像加个小国旗，效果如下： ? 给头像加个小月饼，效果如下： ?源码对我最大的支持在公众号后台回复 201001 获取。

8862 0

用正则表达式修改html字符串的所有div的style样式

最近项目中有一接口返回的一个字段是html格式的字符串，里边每个div中style的高度是固定的px，然后再手机端显示的时候发现，div中的内容重叠了；效果图如下： ? 对应的div如下： ?...由于高度固定，一行内容显示不完的情况下，内容换行的时候就出现重叠；现在一种解决方案就是将height样式调整为height:auto; 下边使用正则表达式将所有div中的height样式进行调整，代码如下...； BingChengJLNR = Regex.Replace(BingChengJLNR, "(div[^>]+height:)([0-9]+px)([^>]+>)", "$1auto$3") 之后就能正常显示了...这里调整的是height，其他style样式原理一样的

1.1K2 0

JS设置标签的内容和样式

= '30px'; 2 通过控制类名进行样式的控制标签也是对象，使用标签的className属性给标签添加类名；注意：因为class是JS的保留字，不符合命名规范，所以类名属性是className...利用className属性给标签设置样式，CSS样式没有出现在标签内，只是给标签添加类名而已； ? 3 获取/设置标签的内容现在可以利用JS来控制标签的样式，能否利用JS控制标签的内容？...5 课后练习 1 id名为h5Course的div标签 div class="wrap" id="h5Course">HTML5学堂div>，JS代码如下： // 注意查看id的大小写 var con...3 利用下方提供的结构代码（注意，提供的结构不能变化，但是可以用JS添加），完成下方的最终效果；结构代码： div class="wrap" id="outer"> div> 最终效果： ? HTML5学堂 - 堡堡耗时7h

20.4K9 0

快速掌握 Tailwind：最流行的原子化 CSS 框架

也就是 class 里包含多个样式：而原子化 css 是这样的写法： div class="text-base p-1 border border-black border-solid">div...很简单，这样写：生成的就是带状态的 class：此外，写响应式的页面的时候，我们要指定什么宽度的时候用什么样式，这个用 tailwind 怎么写呢？...之前你要在 css、js 文件里反复跳来跳去的，查找某个 class 的样式是啥，现在不用这么跳了，直接在 html 里写原子样式，它不香么？...里引入：这样就可以用这个新加的原子 class 了：插件的方式或者 @layer 的方式都可以扩展。...所以就给这个 css 框架起名叫 tailwind 了。确实，我也觉得用这种方式来写 css 更加省力、高效，不用写 class 名字了，代码更简洁了，还不容易样式冲突了。

8563 0

JS简单页面交互实战 - 点击按钮实现求和功能

代码第1行和第8行，因为用var关键字声明了变量，所以JS预编译的时候会给变量开辟存储空间；预编译的时候只是给变量开辟存储空间并把变量默认赋值为undefined（系统会默认赋值undefined）；...本文内容概要 1 点击按钮实现求和的效果图 2 实现页面交互效果的思路 3 用自己的语言进行功能的描述 4 仔细查看功能，并根据基本功能构建结构样式 5 细化功能描述并转换为JS语言或命令 6 JS具体编码以及代码优化...2 实现页面交互效果的思路 ——>用自己的语言进行功能的描述 ——>仔细查看功能，并根据基本功能构建结构样式 ——>细化功能描述并转换为JS语言或命令 ——>JS具体编码以及代码优化，回顾成品代码 Tips...3 第一步：用自己的语言进行功能的描述我们需要用自己的语言进行详细的功能描述，因为后面需要根据功能的描述来搭建结构与样式，它会直接影响后期JS交互效果的实现。...（也可以使用其它按钮）；在功能描述中“加和的结果显示在‘求和结果’的后面”，为了后期JS方便的操作，最终的求和结果显示在em标签里面；根据功能描述搭建的结构与样式 <!

17.7K8 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云