Javascript 使用document.getElementsByClassName添加css类_Javascript_Css

Javascript 使用document.getElementsByClassName添加css类

javascript css

Javascript 使用document.getElementsByClassName添加css类,javascript,css,Javascript,Css,我试图使用javascript添加css类，但它不起作用 var x = document.getElementsByClassName('oldclassname'); var i; for (i = 0; i < x.length; i++) { x[i].className += 'newclassname'; } var x=document.getElementsByClassName（'oldclassname'）； var i；对于（i=0；i

我试图使用javascript添加css类，但它不起作用

var x = document.getElementsByClassName('oldclassname');
var i;
for (i = 0; i < x.length; i++) {
  x[i].className += 'newclassname';
}

var x=document.getElementsByClassName（'oldclassname'）；
var i；
对于（i=0；i


但当我尝试改变背景时，它起作用了
var x = document.getElementsByClassName("oldclassname");
var i;
for (i = 0; i < x.length; i++) {

  x[i].style.backgroundColor = "red";
}

var x=document.getElementsByClassName（“oldclassname”）；
var i；
对于（i=0；i

添加css文件时我是否做错了什么？
className
是一个以空格分隔的类名列表。代码的问题在于它没有用空格分隔类名。试试这个：
var x = document.getElementsByClassName('oldclassname');
var i;
for (i = 0; i < x.length; i++) 
{
   x[i].className += ' newclassname'; // WITH space added
}

var x=document.getElementsByClassName（'oldclassname'）；
var i；
对于（i=0；i

如果没有空格，它只有一个类名
<div class="oldclassnamenewclassname"></div>
//if use space
<div class="oldclassname newclassname"></div>//get two class name


//如果使用空间
//获取两个类名
类名
是以空格分隔的类名列表。代码的问题在于它没有用空格分隔类名。试试这个：
var x = document.getElementsByClassName('oldclassname');
var i;
for (i = 0; i < x.length; i++) 
{
   x[i].className += ' newclassname'; // WITH space added
}

var x=document.getElementsByClassName（'oldclassname'）；
var i；
对于（i=0；i

如果没有空格，它只有一个类名
<div class="oldclassnamenewclassname"></div>
//if use space
<div class="oldclassname newclassname"></div>//get two class name


//如果使用空间
//获取两个类名
它可以工作。检查目标类名的形成。
示例代码
<html>
<head>
<style>
.classFrom{
    font-family: sans-serif;
    color: red;
}

.classTo{
    font-family:cursive;
    color: blue;
}
</style>

<script type="text/javascript">
function clickme(){
var elmList = document.getElementsByClassName('classFrom');
  for (i = 0; i < elmList.length; i++) 
    {
       elmList[i].className += " classTo";
    }
}
</script>
</head>
<body>
<div class="classFrom">SampleText</div>
<button onClick="clickme()">ChangeCSS</button>
</body>
</html>


.来自{
字体系列：无衬线；
颜色：红色；
}
.classTo{
字体系列：草书；
颜色：蓝色；
}
函数clickme（）{
var elmList=document.getElementsByClassName（'classFrom'）；
对于（i=0；i它可以工作。检查目标类名的形成。
示例代码
<html>
<head>
<style>
.classFrom{
    font-family: sans-serif;
    color: red;
}

.classTo{
    font-family:cursive;
    color: blue;
}
</style>

<script type="text/javascript">
function clickme(){
var elmList = document.getElementsByClassName('classFrom');
  for (i = 0; i < elmList.length; i++) 
    {
       elmList[i].className += " classTo";
    }
}
</script>
</head>
<body>
<div class="classFrom">SampleText</div>
<button onClick="clickme()">ChangeCSS</button>
</body>
</html>


.来自{
字体系列：无衬线；
颜色：红色；
}
.classTo{
字体系列：草书；
颜色：蓝色；
}
函数clickme（）{
var elmList=document.getElementsByClassName（'classFrom'）；
对于（i=0；i
更好地使用classList
：

var x=document.getElementsByClassName（'oldclassname'）；
对于（变量i=0；i

.newclassname{color:blue；}
你好，世界更好地使用classList
：

var x=document.getElementsByClassName（'oldclassname'）；
对于（变量i=0；i

.newclassname{color:blue；}
你好，世界嗨，使用javascript有一种更简单的方法来实现这一点
要添加类，请执行以下操作：-

document.getElementsByClassName（'otherClassName'）[0].classList.add（'newClassName'）嗨，使用javascript有一种更简单的方法来实现这一点
要添加类，请执行以下操作：-

document.getElementsByClassName（'otherClassName'）[0].classList.add（'newClassName'）@alastair brown的答案是正确的。您还可以通过使用避免处理className
中的空格。您的代码将是[i].classList.add（'newclassname'）
@alastair brown的答案是正确的。您还可以通过使用避免处理className
中的空格。您的代码将是[i].classList.add（'newclassname'）
这将删除以前的类。这显然是不需要的，因为问题使用了+=
而不是=
。这会删除以前的类。这显然是不需要的，因为问题使用了+=
而不是=
。