Answers:
පංතියක් එක් කිරීමට element.classList.add භාවිතා කරන්න :
element.classList.add("my-class");හා element.classList.remove පන්ති ඉවත් කිරීමට:
element.classList.remove("my-class");classNameමූලද්රව්යයේ දේපල සඳහා ඉඩක් සහ ඔබේ නව පන්තියේ නම එකතු කරන්න . පළමුව, idඔබට පහසුවෙන් යොමු කිරීමක් ලබා ගත හැකි වන පරිදි මූලද්‍රව්‍යය මත තබන්න .
<div id="div1" class="someclass">
<img ... id="image1" name="image1" />
</div>ඉන්පසු
var d = document.getElementById("div1");
d.className += " otherclass";පෙර අවකාශය සටහන් කරන්න otherclass. අවකාශය ඇතුළත් කිරීම වැදගත්ය, එසේ නොමැති නම් එය පන්ති ලැයිස්තුවට පෙර පවතින පන්ති වලට පටහැනි වේ.
MDN හි element.className ද බලන්න .
කිසිදු රාමුවක් නොමැතිව මෙය කිරීමට ඇති පහසුම ක්රමය වන්නේ element.classList.add ක්රමය භාවිතා කිරීමයි .
var element = document.getElementById("div1");
element.classList.add("otherclass");සංස්කරණය කරන්න: තවද ඔබට මූලද්‍රව්‍යයකින් පන්තිය ඉවත් කිරීමට අවශ්‍ය නම් -
element.classList.remove("otherclass");මා කැමති හිස් අවකාශයක් සහ අනුපිටපත් ඇතුළත් කිරීම් හසුරුවා නොගැනීමටයි ( document.classNameප්රවේශය භාවිතා කරන විට එය අවශ්‍ය වේ ). බ්‍රව්සර් සීමාවන් කිහිපයක් ඇත , නමුත් ඔබට ඒවා වටා පොලිෆිල්ස් භාවිතා කළ හැකිය .
ඔබ කැමති පරිදි ඔබේ ඉලක්ක අංගය "d" සොයා ගෙන පසුව:
d.className += ' additionalClass'; //note the spaceපූර්ව පැවැත්ම පරීක්ෂා කිරීම සඳහා ඔබට එය වඩාත් පැහැදිලි ආකාරයකින් ඔතා තැබිය හැකිය, සහ අභ්‍යවකාශ අවශ්‍යතා ආදිය පරීක්ෂා කරන්න.
splitසුදු අවකාශයේ ඇති පන්ති නාමය , එහි ප්‍රති ing ලයක් ලෙස ඇති අරාවෙන් ඔබට අවශ්‍ය නැති එක ඉවත් කරන්න, ඉන්පසු joinනැවත අරාව ... හෝ භාවිතා කරන්න element.classList.remove.
හරස් අනුකූල
පහත සඳහන් උදාහරණය තුළ අපි එකතු 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 භාවිතා කළ හැකි නමුත් එහි ප්‍රති performance ලයක් ලෙස ක්‍රියාකාරීත්වය සැලකිය යුතු ලෙස මන්දගාමී වේ. 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")a.classList ? ...) සාමාන්‍ය ( if (a.classList) { ....) හා සසඳන විට වේග වෙනසක් තිබේද?
classList.remove(). ඇයි ඔබ එය භාවිතා නොකළේ? එය jQuery jsperf.com/remove-class-vanilla-vs-jquery
classListපන්ති ඉවත් කිරීම හැර අන් සියල්ල සඳහා භාවිතා කළේය, මේ නිසා මම එය අසමි .
පිරිසිදු ජාවාස්ක්‍රිප්ට් භාවිතයෙන් පන්තියට මූලද්‍රව්‍යයට එකතු කිරීමේ තවත් ප්‍රවේශයකි
පන්තිය එකතු කිරීම සඳහා:
document.getElementById("div1").classList.add("classToBeAdded");පන්තිය ඉවත් කිරීම සඳහා:
document.getElementById("div1").classList.remove("classToBeRemoved");මා කරන වැඩ පුස්තකාලයක් භාවිතා කිරීමට අවශ්‍ය නොවන විට, මම මෙම කාර්යයන් දෙක භාවිතා කරමි:
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;
}if( cn.indexOf( classname ) != -1 ) { return; } “Btn-info” පන්තිය දැනටමත් මෙහි ඇති බැවින් ඔබ “btn” පන්තිය එකතු කළහොත් මෙය අසමත් වන බවට වග බලා ගන්න.
element.className.split(" ");ගැටළුව වළක්වා ගැනීම සඳහා ඔබ භාවිතා කළ යුතුය @AlexandreDieulot මෙහි වාර්තා කර ඇත.
ඔබ මෙම එක් පන්තියක් එකතු කරනවාට වඩා වැඩි යමක් කරනවා යැයි උපකල්පනය කරන්න (උදා: ඔබට අසමමුහුර්ත ඉල්ලීම් ලැබී ඇති අතර එසේ ය.), මම නිර්දේශ කරන්නේ මූලාකෘති හෝ jQuery වැනි පුස්තකාලයක් .
මෙය ඔබට කළ යුතු සියල්ල (මෙයද ඇතුළුව) ඉතා සරල කරයි.
එබැවින් අපි දැන් ඔබගේ පිටුවේ jQuery ලබාගෙන ඇති බව කියමු, ඔබට මූලද්රව්යයකට පන්ති නාමයක් එක් කිරීමට මෙවැනි කේතයක් භාවිතා කළ හැකිය (පැටවීමේදී, මේ අවස්ථාවේ දී):
$(document).ready( function() {
$('#div1').addClass( 'some_other_class' );
} );වෙනත් දේවල් සඳහා jQuery API බ්‍රව්සරය බලන්න .
මූලද්‍රව්‍යයකින් පන්තියක් එක් කිරීමට / ඉවත් කිරීමට ඔබට classList.add හෝ classList.remove ක්රමය භාවිතා කළ හැකිය.
var nameElem = document.getElementById("name")
nameElem.classList.add("anyclss")ඉහත කේතය "ඕනෑම පන්තියක්" යන නම එලෙම් වෙත එක් කරයි (සහ ප්‍රතිස්ථාපනය නොකරයි). ඒ හා සමානව ඔබට පන්තියක් ඉවත් කිරීමට classList.remove () ක්රමය භාවිතා කළ හැකිය.
nameElem.classList.remove("anyclss")මූලද්රව්යයකට පන්තියක් එක් කිරීමට, පවතින අගයන් ඉවත් නොකර / බලපාන්නේ නැතිව, අවකාශයක් සහ නව පන්ති නාමය එකතු කරන්න,
document.getElementById("MyElement").className += " MyClass";පවත්නා සියලුම පන්ති නව පන්ති එකක් හෝ කිහිපයක් සමඟ ප්‍රතිස්ථාපනය කිරීමට, පන්තියේ නම ගුණාංගය සකසන්න:
document.getElementById("MyElement").className = "MyClass";(ඔබට බහු පන්ති යෙදීම සඳහා අවකාශය වෙන් කළ ලැයිස්තුවක් භාවිතා කළ හැකිය.)
ඔබට jQuery භාවිතා කිරීමට අවශ්‍ය නැතිනම් පැරණි බ්‍රව්සර් සඳහා සහය දැක්වීමට අවශ්‍ය නම්:
function addClass(elem, clazz) {
if (!elemHasClass(elem, clazz)) {
elem.className += " " + clazz;
}
}
function elemHasClass(elem, clazz) {
return new RegExp("( |^)" + clazz + "( |$)").test(elem.className);
}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');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
})
}අනෙක් අය පවසා ඇති දේ විස්තාරනය කිරීම සඳහා, සීඑස්එස් පංති කිහිපයක් එක නූලකින් ඒකාබද්ධ කර ඇති අතර ඒවා අවකාශයෙන් වෙන් කර ඇත. මේ අනුව, ඔබට එය තදින් කේත කිරීමට අවශ්‍ය නම්, එය සරලවම පෙනේ:
<div class="someClass otherClass yetAnotherClass">
<img ... id="image1" name="image1" />
</div>එතැන් සිට ඔබට නව පංතියක් එක් කිරීමට අවශ්‍ය ජාවාස්ක්‍රිප්ට් පහසුවෙන් ව්‍යුත්පන්න කළ හැකිය ... නව පංතියෙන් පසුව අවකාශයේ අංගයක් පන්තියේ නම ගුණාංගයට එකතු කරන්න. මෙය දැන ගැනීමෙන්, අවශ්‍යතාවයක් ඇති වුවහොත් පසුව පන්තියක් ඉවත් කිරීම සඳහා ශ්‍රිතයක් ලිවිය හැකිය.
මූලද්‍රව්‍ය පන්ති සරල ආකාරයකින් එක් කිරීමට, ඉවත් කිරීමට හෝ පරීක්ෂා කිරීමට:
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');ඔබට 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>මම හිතන්නේ බ්‍රව්සරයේ DOM මත ධාවනය කළ හැකි පිරිසිදු ජාවාස්ක්‍රිප්ට් භාවිතා කිරීම වඩා හොඳය.
මෙන්න එය භාවිතා කිරීමට ක්රියාකාරී ක්රමය. මම ES6 භාවිතා කර ඇති නමුත් ඔබේ ජාවාස්ක්‍රිප්ට් ස්ටයිල්ගුයිඩ් වලට ගැලපෙන ඕනෑම දෙයක් ES5 සහ ක්රියාකාරී ප්‍රකාශනය හෝ ක්රියාකාරී අර්ථ දැක්වීම භාවිතා කිරීමට නිදහස්ව සිටින්න.
'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)
}
}පිරිසිදු JS සමඟ නියැදිය. පළමු උදාහරණයේ දී අපි අපගේ මූලද්රව්යයේ හැඳුනුම්පත ලබාගෙන උදා 2 පන්ති එකතු කරමු.
document.addEventListener('DOMContentLoaded', function() {
document.getElementsById('tabGroup').className = "anyClass1 anyClass2";
})දෙවන උදාහරණයේ දී අපි මූලද්රව්යයේ පන්තියේ නම ලබාගෙන තවත් 1 ක් එකතු කරමු.
document.addEventListener('DOMContentLoaded', function() {
document.getElementsByClassName('tabGroup')[0].className = "tabGroup ready";
})ලොඩාෂ් භාවිතා කරන සහ classNameනූල් යාවත්කාලීන කිරීමට කැමති අය සඳහා :
// get element reference
var elem = document.getElementById('myElement');
// add some classes. Eg. 'nav' and 'nav header'
elem.className = _.chain(elem.className).split(/[\s]+/).union(['nav','navHeader']).join(' ').value()
// remove the added classes
elem.className = _.chain(elem.className).split(/[\s]+/).difference(['nav','navHeader']).join(' ').value()document.getElementById('some_id').className+=' someclassname'හෝ:
document.getElementById('come_id').classList.add('someclassname')දෙවන ප්රවේශය ක්‍රියාත්මක නොවූ විට පළමු ප්රවේශය පන්තිය එක් කිරීමට උපකාරී විය. පළමු ප්රවේශය
ඉදිරිපිට ඉඩක් තබා ගැනීමට අමතක නොකරන්න ' someclassname'.
ඉවත් කිරීම සඳහා ඔබට භාවිතා කළ හැකිය:
document.getElementById('some_id').classList.remove('someclassname')පළමුව, div ට හැඳුනුම්පතක් දෙන්න. ඉන්පසු, appendClass ශ්‍රිතය අමතන්න:
<script language="javascript">
function appendClass(elementId, classToAppend){
var oldClass = document.getElementById(elementId).getAttribute("class");
if (oldClass.indexOf(classToAdd) == -1)
{
document.getElementById(elementId).setAttribute("class", classToAppend);
}
}
</script>ඔබේ මූලද්‍රව්‍යය තේරීමට ඔබට API විමසුම් තේරීම භාවිතා කළ හැකි අතර පසුව මූලද්‍රව්‍යය හා නව පන්තියේ නම පරාමිතීන් ලෙස ශ්‍රිතයක් නිර්මාණය කළ හැකිය. නවීන බ්‍රව්සර් සඳහා පන්ති ලැයිස්තුව භාවිතා කිරීම, වෙනත් IE8 සඳහා. එවිට ඔබට සිදුවීමකින් පසුව ශ්‍රිතය ඇමතිය හැකිය.
//select the dom element
var addClassVar = document.querySelector('.someclass');
//define the addclass function
var addClass = function(el,className){
if (el.classList){
el.classList.add(className);
}
else {
el.className += ' ' + className;
}
};
//call the function
addClass(addClassVar, 'newClass');මෙම js කේතය මට වැඩ කරයි
පන්ති නාම ප්‍රතිස්ථාපනය සපයයි
var DDCdiv = hEle.getElementBy.....
var cssCNs = DDCdiv.getAttribute('class');
var Ta = cssCNs.split(' '); //split into an array
for (var i=0; i< Ta.length;i++)
{
if (Ta[i] == 'visible'){
Ta[i] = 'hidden';
break;// quit for loop
}
else if (Ta[i] == 'hidden'){
Ta[i] = 'visible';
break;// quit for loop
}
}
DDCdiv.setAttribute('class',Ta.join(' ') ); // Join array with space and set class nameඑකතු කිරීමට පමණක් භාවිතා කරන්න
var cssCNs = DDCdiv.getAttribute('class');
var Ta = cssCNs.split(' '); //split into an array
Ta.push('New class name');
// Ta.push('Another class name');//etc...
DDCdiv.setAttribute('class',Ta.join(' ') ); // Join array with space and set class nameභාවිතය ඉවත් කිරීමට
var cssCNs = DDCdiv.getAttribute('class');
var Ta = cssCNs.split(' '); //split into an array
for (var i=0; i< Ta.length;i++)
{
if (Ta[i] == 'visible'){
Ta.splice( i, 1 );
break;// quit for loop
}
}
DDCdiv.setAttribute('class',Ta.join(' ') ); // Join array with space and set class nameමෙය කෙනෙකුට ප්‍රයෝජනවත් වේ යැයි සිතමි
element.classList.add("my-class")ඒ වෙනුවට භාවිතා කරන්න.