Bla*_*man 1109 javascript dom-manipulation
我有一个已经有类的元素:
<div class="someclass">
<img ... id="image1" name="image1" />
</div>
现在我想创建一个Javascript函数,它将一个类添加到div(不替换,但添加).
我怎样才能做到这一点？
Ish*_*ael 1798
将空格加上新类的名称添加到className元素的属性中.首先,放置id元素,以便您可以轻松获得参考.
<div id="div1" class="someclass">
<img ... id="image1" name="image1" />
</div>
然后
var d = document.getElementById("div1");
d.className += " otherclass";
Yur*_*uri 1324
没有任何框架的最简单方法是使用element.classList.add方法.
var element = document.getElementById("div1");
element.classList.add("otherclass");
编辑: 如果你想从一个元素中删除类 -
element.classList.remove("otherclass");
我不希望自己添加任何空白空间和重复的条目处理(使用该document.className方法时需要).有一些浏览器限制,但您可以使用polyfills解决它们.
ann*_*ata 173
找到你想要的目标元素"d"然后:
d.className += ' additionalClass'; //note the space
你可以用更聪明的方式包装它来检查预先存在,并检查空间要求等.
dav*_*rey 129
交叉兼容
在以下示例中,我们classname向<body>元素添加了一个.这是IE-8兼容的.
var a = document.body;
a.classList ? a.classList.add('classname') : a.className += ' classname';
这是以下的简写..
var a = document.body;
if (a.classList) {
a.classList.add('wait');
} else {
a.className += ' wait';
}
性能
如果您更关心性能而不是交叉兼容性,则可以将其缩短到以下速度,速度提高4%.
var z = document.body;
document.body.classList.add('wait');
方便
或者你可以使用jQuery,但结果性能明显变慢.根据jsPerf,慢了94%
$('body').addClass('wait');
性能
如果您关注性能,有选择地使用jQuery是删除类的最佳方法
var a = document.body, c = ' classname';
$(a).removeClass(c);
没有jQuery,它的速度要慢32%
var a = document.body, c = ' classname';
a.className = a.className.replace( c, '' );
a.className = a.className + c;
Element("document.body").ClassNames.add("classname")
Element("document.body").ClassNames.remove("classname")
Element("document.body").ClassNames.set("classname")
YAHOO.util.Dom.hasClass(document.body,"classname")
YAHOO.util.Dom.addClass(document.body,"classname")
YAHOO.util.Dom.removeClass(document.body,"classname")
Sat*_*pta 47
JavaScript 提供了两种不同的方法来向 HTML 元素添加类：
element.classList.add()方法className财产使用这两种方法，您可以一次添加单个或多个类。
element.classList.add()方法var element = document.querySelector('.box');
// using add method
// adding single class
element.classList.add('color');
// adding multiple class
element.classList.add('border', 'shadow');.box {
width: 200px;
height: 100px;
}
.color {
background: skyblue;
}
.border {
border: 2px solid black;
}
.shadow {
box-shadow: 5px 5px 5px gray;
}<div class="box">My Box</div>element.className财产注意：始终使用+=运算符并在类名前添加空格，以使用 classList 方法添加类。
var element = document.querySelector('.box');
// using className Property
// adding single class
element.className += ' color';
// adding multiple class
// keep classes space separated
element.className += ' border shadow';.box {
width: 200px;
height: 100px;
}
.color {
background: skyblue;
}
.border {
border: 2px solid black;
}
.shadow {
box-shadow: 5px 5px 5px gray;
}<div class="box">My Box</div>Sho*_*ate 33
使用纯JavaScript将类添加到元素的另一种方法
添加课程:
document.getElementById("div1").classList.add("classToBeAdded");
删除课程:
document.getElementById("div1").classList.remove("classToBeRemoved");
meo*_*ouw 21
当我正在做的工作不保证使用库时,我使用这两个函数:
function addClass( classname, element ) {
var cn = element.className;
//test for existance
if( cn.indexOf( classname ) != -1 ) {
return;
}
//add a space if the element already has class
if( cn != '' ) {
classname = ' '+classname;
}
element.className = cn+classname;
}
function removeClass( classname, element ) {
var cn = element.className;
var rxp = new RegExp( "\\s?\\b"+classname+"\\b", "g" );
cn = cn.replace( rxp, '' );
element.className = cn;
}
rfu*_*duk 20
假设你做的不仅仅是添加这个类(例如,你有异步请求等等),我建议使用像Prototype或jQuery这样的库.
这将使你需要做的所有事情(包括这个)变得非常简单.
所以假设你现在已经在你的页面上有了jQuery,你可以使用这样的代码为一个元素添加一个类名(在这种情况下加载时):
$(document).ready( function() {
$('#div1').addClass( 'some_other_class' );
} );
查看jQuery API浏览器以获取其他内容.
小智 14
您可以使用classList.add OR classList.remove方法从元素中添加/删除类.
var nameElem = document.getElementById("name")
nameElem.classList.add("anyclss")
上面的代码将为nameElem添加(而不是替换)类"anyclass".类似地,您可以使用classList.remove()方法删除类.
nameElem.classList.remove("anyclss")
要在不删除/影响现有值的情况下向元素添加类,请添加空格和新类名,如下所示:
document.getElementById("MyElement").className += " MyClass";
要用一个或多个新类替换所有现有类,请设置className属性:
document.getElementById("MyElement").className = "MyClass";
(您可以使用以空格分隔的列表来应用多个类.)
小智 9
这可能对 WordPress 开发人员等有帮助。
document.querySelector('[data-section="section-hb-button-1"] .ast-custom-button').classList.add('TryMyClass');
我也认为最快的方法是在 es5 中使用 Element.prototype.classList：document.querySelector(".my.super-class").classList.add('new-class')
但是在 ie8 中没有 Element.prototype.classList 这样的东西，无论如何你可以用这个代码片段来填充它（可以随意编辑和改进它)：
if(Element.prototype.classList === void 0){
function DOMTokenList(classes, self){
typeof classes == "string" && (classes = classes.split(' '))
while(this.length){
Array.prototype.pop.apply(this);
}
Array.prototype.push.apply(this, classes);
this.__self__ = this.__self__ || self
}
DOMTokenList.prototype.item = function (index){
return this[index];
}
DOMTokenList.prototype.contains = function (myClass){
for(var i = this.length - 1; i >= 0 ; i--){
if(this[i] === myClass){
return true;
}
}
return false
}
DOMTokenList.prototype.add = function (newClass){
if(this.contains(newClass)){
return;
}
this.__self__.className += (this.__self__.className?" ":"")+newClass;
DOMTokenList.call(this, this.__self__.className)
}
DOMTokenList.prototype.remove = function (oldClass){
if(!this.contains(newClass)){
return;
}
this[this.indexOf(oldClass)] = undefined
this.__self__.className = this.join(' ').replace(/ +/, ' ')
DOMTokenList.call(this, this.__self__.className)
}
DOMTokenList.prototype.toggle = function (aClass){
this[this.contains(aClass)? 'remove' : 'add'](aClass)
return this.contains(aClass);
}
DOMTokenList.prototype.replace = function (oldClass, newClass){
this.contains(oldClass) && this.remove(oldClass) && this.add(newClass)
}
Object.defineProperty(Element.prototype, 'classList', {
get: function() {
return new DOMTokenList( this.className, this );
},
enumerable: false
})
}要以简单的方式添加、删除或检查元素类：
var uclass = {
exists: function(elem,className){var p = new RegExp('(^| )'+className+'( |$)');return (elem.className && elem.className.match(p));},
add: function(elem,className){if(uclass.exists(elem,className)){return true;}elem.className += ' '+className;},
remove: function(elem,className){var c = elem.className;var p = new RegExp('(^| )'+className+'( |$)');c = c.replace(p,' ').replace(/ /g,' ');elem.className = c;}
};
var elem = document.getElementById('someElem');
//Add a class, only if not exists yet.
uclass.add(elem,'someClass');
//Remove class
uclass.remove(elem,'someClass');
小智 6
我知道 IE9 已正式关闭，我们可以通过element.classList上面所说的方法来实现它，但我只是想了解它是如何工作的classList上面许多答案的帮助下我可以学习它。
下面的代码扩展了上面的许多答案，并通过避免添加重复的类来改进它们。
function addClass(element,className){
var classArray = className.split(' ');
classArray.forEach(function (className) {
if(!hasClass(element,className)){
element.className += " "+className;
}
});
}
//this will add 5 only once
addClass(document.querySelector('#getbyid'),'3 4 5 5 5');
您可以使用类似于 jQuery 的现代方法
如果您只需要更改一个元素，即 JS 会在 DOM 中找到的第一个元素，您可以使用：
document.querySelector('.someclass').className += " red";.red {
color: red;
}<div class="someclass">
<p>This method will add class "red" only to first element in DOM</p>
</div>
<div class="someclass">
<p>lorem ipsum</p>
</div>
<div class="someclass">
<p>lorem ipsum</p>
</div>
<div class="someclass">
<p>lorem ipsum</p>
</div>请记住在班级名称前留一个空格。
如果您有多个要添加新类的类，则可以像这样使用它
document.querySelectorAll('.someclass').forEach(function(element) {
element.className += " red";
});.red {
color: red;
}<div class="someclass">
<p>This method will add class "red" to all elements in DOM that have "someclass" class.</p>
</div>
<div class="someclass">
<p>lorem ipsum</p>
</div>
<div class="someclass">
<p>lorem ipsum</p>
</div>
<div class="someclass">
<p>lorem ipsum</p>
</div>只是为了详细说明其他人所说的，多个 CSS 类组合在一个字符串中，用空格分隔。因此，如果你想对其进行硬编码，它看起来就像这样：
<div class="someClass otherClass yetAnotherClass">
<img ... id="image1" name="image1" />
</div>
从那里您可以轻松地派生出添加新类所需的 javascript...只需在元素的 className 属性后附加一个空格，后跟新类即可。知道了这一点，您还可以编写一个函数来稍后在需要时删除一个类。
如果您不想使用jQuery并希望支持旧版浏览器:
function addClass(elem, clazz) {
if (!elemHasClass(elem, clazz)) {
elem.className += " " + clazz;
}
}
function elemHasClass(elem, clazz) {
return new RegExp("( |^)" + clazz + "( |$)").test(elem.className);
}
我认为最好使用纯 JavaScript，我们可以在浏览器的 DOM 上运行它。
这是使用它的功能方式。我使用过 ES6，但可以随意使用 ES5 和函数表达式或函数定义，以适合您的 JavaScript StyleGuide。
'use strict'
const oldAdd = (element, className) => {
let classes = element.className.split(' ')
if (classes.indexOf(className) < 0) {
classes.push(className)
}
element.className = classes.join(' ')
}
const oldRemove = (element, className) => {
let classes = element.className.split(' ')
const idx = classes.indexOf(className)
if (idx > -1) {
classes.splice(idx, 1)
}
element.className = classes.join(' ')
}
const addClass = (element, className) => {
if (element.classList) {
element.classList.add(className)
} else {
oldAdd(element, className)
}
}
const removeClass = (element, className) => {
if (element.classList) {
element.classList.remove(className)
} else {
oldRemove(element, className)
}
}document.getElementById('some_id').className+=' someclassname'
或者：
document.getElementById('some_id').classList.add('someclassname')
当第二种方法不起作用时，第一种方法有助于添加类。
不要忘记' someclassname'在第一种方法的前面保留一个空格。
对于删除，您可以使用：
document.getElementById('some_id').classList.remove('someclassname')
| 归档时间： |
|
| 查看次数： |
1524102 次 |
| 最近记录： |