当 <div> 标签的类名看起来很奇怪时，如何更改它？ [复制]

Posted 2023-03-06

技术标签:

【中文标题】当 <div> 标签的类名看起来很奇怪时，如何更改它？ [复制]【英文标题】：How do I change a <div> tag class name when it has a weird looking class name for it? [duplicate] 【发布时间】：2019-01-02 09:28:03 【问题描述】：

这是我使用的原始 div 标签：

<div class="stadvancedmenu_sub advanced_style_wide col-md-0" style="display: none; overflow: visible;">

我的问题是，当我尝试使用 jquery 代码将类名替换为其他名称时，它不起作用。它可能是名字本身，但我不知道。这是我用的：

$('.stadvancedmenu_sub.advanced_style_wide.col-md-0').addClass('ddMenu').removeClass('.stadvancedmenu_sub.advanced_style_wide.col-md-0');

请记住，我不能直接进入并手动更改措辞或其他任何内容，因为我无权访问文档进行编辑，但我可以向文档添加代码以进行更改。这就是为什么我要问我应该使用什么方法将类的名称更改为更简单的名称。

我也尝试了 javascript 并尝试使用此函数调用它：

function replace() 
  var newClass = document.getElementsByClassName('.stadvancedmenu_sub.advanced_style_wide.col-md-0')[0];
  newClass.setAttribute('class','newClassName')

replaceClass();

但没有奏效，因为（根据我的假设）类的名称很奇怪并且有空格等。

【问题讨论】：

【参考方案1】：

没有类名“有空格”，如果有空格，它们是单独的类。

你的初始选择器错误，因为它没有正确地按类定位元素，请尝试以下操作：

$('.stadvancedmenu_sub.advanced_style_wide.col-md-0')

当您想要定位具有“多个特定类”的所有元素时，您可以使用点 '.' 连接类名

【讨论】：

应用了这个，但没有用。将你的删除类更改为这个 removeClass('stadvancedmenu_sub advanced_style_wide col-md-0') 你不需要在那里连接它们，你需要让它们带有空格来删除所有类我试过 $('.stadvancedmenu_sub.advanced_style_wide.col-md-0').addClass('ddMenu').removeClass('stadvancedmenu_sub advanced_style_wide col-md-0');但它没有改变任何东西。【参考方案2】：

由于选择器中的所有类都表示相同的元素，因此请删除类之间的空格并将.（点）放在类名之前。将您的选择器更改为：

$('.stadvancedmenu_sub.advanced_style_wide.col-md-0')

但是如果你想使用getElementsByClassName()那么你不应该指定.（点）并在选择器中的类名之间指定空格：

document.getElementsByClassName('stadvancedmenu_sub advanced_style_wide col-md-0')

function replaceClass() 
  var newClass = document.getElementsByClassName('stadvancedmenu_sub advanced_style_wide col-md-0')[0];
  newClass.setAttribute('class','newClassName');
  newClass.style.display = 'block';
  newClass.style.color = 'red';

replaceClass();

&lt;div class="stadvancedmenu_sub advanced_style_wide col-md-0" style="display: none; overflow: visible;"&gt;Test test test test&lt;/div&gt;

【讨论】：

更改了名称并添加了句点，但当我检查时它没有更改代码中的类名。 @VictorM.，请查看我的更新答案.... 我需要使用ajax链接吗？试过你做的新功能，还是不行。 @VictorM.，不，你不需要链接....【参考方案3】：

试试这个代码

<div id="mydiv" class="stadvancedmenu_sub advanced_style_wide col-md-0" style="display: none; overflow: visible;"> 

$("#mydiv").attr("class","new_class_name");

【讨论】：

就像我之前提到的，我无法进入并添加 ID 或编辑现有代码本身，因为我没有访问权限。所以这在我的情况下不起作用。【参考方案4】：

您的 jQuery 选择器不起作用，因为您对多个类使用了错误的语法。元素所具有的每个类都需要在类选择器. 之前，并且在其之间不能有空格，因为这表明它是某个已故元素之后的下一个选择器。

所以

$('.stadvancedmenu_sub advanced_style_wide col-md-0')

应该是：

$('.stadvancedmenu_sub.advanced_style_wide.col-md-0')

至于您的 getElementsByClassName() 不起作用，因为与使用 CSS 选择器的 jQuery 或本机 querySelector() 方法不同，gEBCN 使用类中使用的确切名称。

所以

getElementsByClassName('.stadvancedmenu_sub.advanced_style_wide.col-md-0')

会

getElementsByClassName('stadvancedmenu_sub advanced_style_wide col-md-0')

或者只是众多类中的一种

getElementsByClassName('stadvancedmenu_sub')

您还必须确保在正确的时间运行代码。如果您尝试在元素尚不存在时运行 jQuery 调用，则不会发生任何事情，甚至不会出现错误。如果您使用本机 getElementsByClassName 尝试它，尽管您应该收到有关访问未定义值的错误

【讨论】：

进行了更改并尝试了您使用 javascript 代码所说的内容，但没有任何改变。 div 标签中的类名保持不变。 @VictorM。你什么时候运行代码？该特定 div 何时添加到文档中？它是通过一些动态过程（例如 Ajax）添加的吗？如前所述，如果您在元素存在后不运行它，那么它将无法工作。我不太确定。我在浏览器网站编辑器中使用了一些，比如已经有一个预制网站的 squarespace。我不确定它是否使用 ajax 等。元素存在后我将如何运行它？ @VictorM。 squarespace 将您的 javascript 代码与预制网站相关的位置放在哪里？是将您的代码直接放在<head> 中的<script> 标记中，还是在</body> 之前将其添加到站点底部？至于你的代码存在后运行它取决于它何时添加，你有一个可以查看的工作站点吗？是的，脚本似乎放在了网站的标题中。在该标头中，它具有其他带有自己的脚本标签的代码。这是网站本身的链接。 marketflux.foundrycommerce.com/LogonLink/…?

以上是关于当 <div> 标签的类名看起来很奇怪时，如何更改它？ [复制]的主要内容，如果未能解决你的问题，请参考以下文章

XCODE：标签约束表现得很奇怪

vscode快捷操作emmet语法

react-select 中的 <Select /> 组件看起来很奇怪

jquery 当鼠标移进div改变选中div样式，同时改变这个div里面的a标签样式，怎样改变？

div标签的闭合检查

如何通过一个类名使用 jQuery Selector 获取多个值