<div>标签的类名看起来很怪异时,如何更改?

时间:2018-07-25 14:05:27

标签: javascript jquery html

以下是与div一起使用的原始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();

但是没有用,因为(根据我的假设)类的名称很奇怪,并且带有空格等。

4 个答案:

答案 0 :(得分:2)

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

您的初始选择器是错误的,因为它不能正确地按类定位元素,请尝试以下操作:

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

当您要定位具有“多个特定类”的所有元素时,则用点“。”将类名合并。

答案 1 :(得分:1)

由于选择器中的所有类都表示相同的元素,因此请删除类之间的空格,并在类名之前将data.table(点)开头。将选择器更改为:

.

但是,如果要使用$('.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();

答案 2 :(得分:0)

尝试此代码

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

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

答案 3 :(得分:0)

您的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进行尝试,则可能会遇到有关访问未定义值的错误