文章/答案/技术大牛

发布

div获取css名

基础概念

div 是 HTML 中的一个元素，用于创建一个块级容器，常用于布局和样式设置。CSS（层叠样式表）则是一种用来描述 HTML 或 XML（包括 SVG 和 XHTML 等）文档样式的样式表语言。

获取 CSS 名称的方法

在 JavaScript 中，可以通过以下几种方式获取 div 元素的 CSS 类名：

通过 className 属性获取

var divElement = document.getElementById('myDiv');
var classNames = divElement.className;
console.log(classNames); // 输出: "class1 class2 class3"

通过 classList 属性获取

var divElement = document.getElementById('myDiv');
var classList = divElement.classList;
console.log(classList); // 输出: DOMTokenList ["class1", "class2", "class3"]

通过 getAttribute 方法获取

var divElement = document.getElementById('myDiv');
var classNames = divElement.getAttribute('class');
console.log(classNames); // 输出: "class1 class2 class3"

类型

内联样式：直接在 HTML 元素上使用 style 属性定义样式。
内部样式表：在 HTML 文档的 <head> 部分使用 <style> 标签定义样式。
外部样式表：将 CSS 样式放在单独的 .css 文件中，并通过 <link> 标签引入到 HTML 文档中。

应用场景

页面布局：通过 CSS 类名控制元素的布局和排列。
样式复用：将常用的样式定义为类名，以便在多个元素中复用。
动态样式：通过 JavaScript 动态修改元素的类名，实现样式的动态变化。

常见问题及解决方法

问题：为什么 `div` 元素的类名获取不到？

原因：

元素未正确加载：在 DOM 元素还未加载完成时尝试获取类名。
ID 错误：指定的 ID 不存在或拼写错误。
CSS 类名拼写错误：CSS 类名拼写错误或未正确应用。

解决方法：

确保 DOM 加载完成：将获取类名的代码放在 window.onload 事件中，或使用 DOMContentLoaded 事件。

window.onload = function() {
    var divElement = document.getElementById('myDiv');
    var classNames = divElement.className;
    console.log(classNames);
};

检查 ID 和类名：确保 HTML 元素的 ID 和 CSS 类名拼写正确，并且已正确应用。

问题：如何动态修改 `div` 元素的类名？

解决方法：

var divElement = document.getElementById('myDiv');
divElement.className = 'newClass'; // 替换所有类名
divElement.classList.add('newClass'); // 添加类名
divElement.classList.remove('oldClass'); // 移除类名
divElement.classList.toggle('toggleClass'); // 切换类名

通过以上方法，可以灵活地获取和修改 div 元素的 CSS 类名，实现丰富的样式控制。

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

有帮助

没帮助

在webpack css加载程序中使用外部样式和多个类名

css、reactjs、webpack

是否有一种方法可以在获得base64类名的同时使用外部css (例如引导、语义-ui、基础等等)？如果有一种方法可以使用多个类名，这是可能的。/semantic/dist/components/button.min.css' return ( <div className="App"><div className={style.button}>He

浏览 8提问于2016-01-12得票数 4

回答已采纳

4回答

CSS的速度

css、performance、rendering、micro-optimization

这只是一个帮助我更好地理解CSS渲染的问题。 <div class="second"> </div.third { color: red; }

浏览 0提问于2009-02-11得票数 16

回答已采纳

2回答

使用Scss从类名中内插值

sass

我想设置这个类名：在scss中，获取我通过类名设置的值，并将其应用于css规则。

浏览 29提问于2017-06-16得票数 1

2回答

通过css类名获取div的内容

php、html、dom

使用dom，我想从某个特定的div中获取内容。我目前的情况是:我想从网站链接中获取内容，其html结构如下所示。我想要本地数据库的css类数据。我认为这是可能的，只使用dom。div class="list-card-user"> </div> <div class="list-c

浏览 3提问于2015-01-31得票数 1

回答已采纳

2回答

在Selenium中尝试从div类获取文本时发生InvalidSelectorException错误

python、selenium、selenium-webdriver

我正在尝试使用Selenium WebDriver获取文本，下面是我的代码。请注意，我不想使用XPath，因为在我的例子中，ID在每次重新启动网页时都会被更改。我的代码：HTML： <div class="O5uR6d">to fasten stuff</div

浏览 5提问于2021-04-08得票数 2

回答已采纳

1回答

单击另一个Div时，用Javascript按ID更改Div背景

javascript、jquery、html、css

我有在javascript中生成的多个div，每个div都有一个唯一的id属性。不知道该怎么做。现在，当我单击div时，它会发生变化，然后单击另一个，它们都会显示次要颜色。当单击另一个div时，我不跟踪原始div的id。这就是我要做的吗？我很感激你的帮助

浏览 1提问于2015-12-14得票数 0

回答已采纳

2回答

如何在html中将变量添加到类标记中？

html、css

我们希望使div的背景色随着i值的变化而自动变化。如何在html中向class标签中添加变量？var i = 0;<div class="bgcolor+i"></div>.bgcolor0{} background: green

浏览 5提问于2022-08-01得票数 -1

1回答

使用jquery设置css这个attr值？

jquery、html、css

如何使用attr ae-mw css和的attr值添加任何元素？一条龙 <div class="ahmed" ae-mw="200px" >ahmed</div><script>$(document).ready(function () {$('body *[ae-mw]').css("max-width", $(this).attr("ae-mw"));});</

浏览 1提问于2020-01-26得票数 0

回答已采纳

2回答

将HTML元素中的CSS类替换为其在JavaScript中的CSS属性

javascript、html、css

我正在尝试使用JavaScript (类似于屏幕截图)获取超文本标记语言页面的源代码。对于样式，我使用的是外部CSS。但是，当我获得HTML源代码时，样式将不会被应用，因为我将无法获得元素的CSS属性。对于HTML元素，和CSS， .exampleC

浏览 31提问于2020-02-14得票数 2

2回答

NextJs css模块- className中的变量

next.js、css-modules

/css/Style.module.css' return ( {[...Array(7)].map((e, i) => {className={`${Style.logo}${numIn}`} src='/assets/svg/logo.svg' alt="" key={i} /> })} </

浏览 3提问于2021-09-06得票数 0

回答已采纳

1回答

Excel VBA单击没有使用JSON的名称或ID的网站按钮

vba、internet-explorer、web-scraping、automation

使用chrome检查网页时，我可以看到这个按钮有以下代码：HTML‘视图源’建议一个脚本type="application/JSON“ 我被这一切弄糊涂了。有人知道我怎么选择这个按钮吗？

浏览 5提问于2019-12-18得票数 0

回答已采纳

4回答

如何检查javascript中的div值

javascript、html

如何使用javascript设置div样式？我在获取类名的值方面有问题。如果有人知道的话请帮忙。<div class="this_is_i_want_to_set_the_background_color" id="divname"></div>

浏览 0提问于2013-08-26得票数 2

回答已采纳

1回答

如何在类名随机化时获取Next.js中的DOM元素

css、sass、next.js、css-modules

document.querySelector('.nav');TypeError: Cannot read properties of null (reading 'classList')<divclass="Nav_nav___cOea"></div> 而不是我在CSS中使用的.nav类。我使用的是css模块和sass，所以我的CSS是在Nav.module.sass

浏览 6提问于2022-03-10得票数 0

回答已采纳

2回答

如何用主页制作模态滚动

jquery、css、modal-dialog

我有一个模式，内容比浏览器的高度高，因此我有一些内容无法显示。(模式位置似乎是固定的，不能作为一个整体滚动)我怎样才能使模式在主页上可滚动，这样我才能真正地查看下面的内容？

浏览 0提问于2012-04-08得票数 6

回答已采纳

1回答

如何获取类下的H1标签值

protractor

<div _ngcontent-c6="" class="inner"> </h1>我尝试了"returnelement(by.css('.inner')).element(by.css("h1")).getText();“”和"return

浏览 0提问于2018-10-01得票数 1

1回答

jQuery使用正则表达式查找具有变量类名的元素？

javascript、jquery、css、regex

我正在尝试获取其中包含某个类名的元素的数量，问题是，这个类名的末尾有一个变量。例如： <div class="col"> <div class="col width-33"> </div><div clas

浏览 0提问于2014-05-08得票数 0

3回答

在jQuery中按包含的文本选择元素

jquery、css

我有一张很多div的清单。每个块总是遵循这个模式，在页面上有几次。 <div ...>count</div></div>它们没有ids，类名也会更改。是别人写的htm

浏览 2提问于2013-10-23得票数 0

回答已采纳

2回答

当特定元素具有相同的类名时，如何让jQuery函数处理这些元素？

javascript、jquery、css、function

我有包含文本的部分( div )，但当文本太长时，我会让文本“淡出”(使用css)，并显示一个"show more“按钮，当单击该按钮时，会显示该特定div的完整文本。问题是它只适用于第一个div，我相信这是因为它们都有相同的类名和id名。解决这个问题的最好方法是什么？下面是我的代码：<div id="fade-container"> <div id="fade-content

浏览 1提问于2016-09-16得票数 1

回答已采纳

2回答

如何从/通过类名获取所有CSS样式属性？如何在样式表中找到类？

javascript、jquery、css

我需要获得与元素匹配的每个类的所有CSS属性。this.className也许我必须在样式表中进行比较或搜索？var sheets = document.styleSheets;谢谢你的帮助。这不是重复，我不是寻找所有类型的CSS属性。我只特别寻找css类的属性，所以我认为这是一个

浏览 4提问于2019-03-07得票数 0

5回答

如何检查外部(跨域) CSS文件是否使用Javascript加载

javascript、css

创建div元素。使用setAttributeappendChild设置类名，div on body。现在使用document.defaultView.getComputedStyle(divElement, null)[cssRule].获取CSS规则值。现在getComputedStyle正在返回默认值，如果我在断点上使用Firebug在getComputedStyle调用之前等待，那么它将从注入的CSS返回CSS规则。穆尼姆

浏览 6提问于2010-09-25得票数 7

回答已采纳

点击加载更多