Jak mogę zmienić klasę elementu HTML w odpowiedzi na zdarzenie {x0}} za pomocą JavaScript?
29 odpowiedzi
Jest to najłatwiejsza z biblioteką jak jQuery:
<input type="button" onClick="javascript:test_byid();" value="id='second'" />
<script>
function test_byid()
{
$("#second").toggleClass("highlight");
}
</script>
Brak przestępstwa, ale to jest wózek, aby zmienić klasę w locie, gdyż zmusza tłumacza CSS do ponownego obliczenia wizualnej prezentacji całej strony internetowej.
Powodem jest to, że interpreter CSS jest prawie niemożliwe, aby dowiedzieć się, czy jakikolwiek spadek lub kaskadowy można zmienić, więc krótka odpowiedź brzmi:
Nigdy nie zmieniaj nazwę klasy na lotach! -)
Ale zwykle musisz tylko zmienić nieruchomość lub dwie, a to jest łatwo wdrożone:
function highlight(elm){
elm.style.backgroundColor ="#345";
elm.style.color = "#fff";
}
Możesz także zrobić:
document.getElementById('id').classList.add('class');
document.getElementById('id').classList.remove('class');
I przełączanie klasy (usuń, jeśli istnieje inna dodać go):
document.getElementById('id').classList.toggle('class');
W jednym z moich starych projektów, które nie wykorzystały jQuery, zbudowałem następujące funkcje do dodawania, usuwania i sprawdzania, czy element ma klasę:
function hasClass(ele, cls) {
return ele.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));
}
function addClass(ele, cls) {
if (!hasClass(ele, cls)) ele.className += " " + cls;
}
function removeClass(ele, cls) {
if (hasClass(ele, cls)) {
var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');
ele.className = ele.className.replace(reg, ' ');
}
}
Tak więc, na przykład, jeśli chcę onclick, aby dodać trochę klasy do przycisku, którego mogę użyć:
<script type="text/javascript">
function changeClass(btn, cls) {
if(!hasClass(btn, cls)) {
addClass(btn, cls);
}
}
</script>
...
<button onclick="changeClass(this, "someClass")">My Button</button>
Do tej pory lepiej byłoby lepiej użyć jQuery.
Możesz użyć node.className jak więc:
document.getElementById('foo').className = 'bar';
Powinno to działać w IE5.5 i up zgodnie z ppk.
Wow, zaskoczony jest tu tak wiele odpowiedzi tutaj ...
<div class="firstClass" onclick="this.className='secondClass'">
Korzystanie z czystego kodu JavaScript:
function hasClass(ele, cls) {
return ele.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));
}
function addClass(ele, cls) {
if (!this.hasClass(ele, cls)) ele.className += " " + cls;
}
function removeClass(ele, cls) {
if (hasClass(ele, cls)) {
var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');
ele.className = ele.className.replace(reg, ' ');
}
}
function replaceClass(ele, oldClass, newClass){
if(hasClass(ele, oldClass)){
removeClass(ele, oldClass);
addClass(ele, newClass);
}
return;
}
function toggleClass(ele, cls1, cls2){
if(hasClass(ele, cls1)){
replaceClass(ele, cls1, cls2);
}else if(hasClass(ele, cls2)){
replaceClass(ele, cls2, cls1);
}else{
addClass(ele, cls1);
}
}
To działa dla mnie:
function setCSS(eleID) {
var currTabElem = document.getElementById(eleID);
currTabElem.setAttribute("class", "some_class_name");
currTabElem.setAttribute("className", "some_class_name");
}
Jak również można rozszerzyć obiekt HTMLELEMEMENT, aby dodać metody, aby dodać, usunąć, przełączyć i sprawdzić klasy ( gist ):
HTMLElement = typeof(HTMLElement) != 'undefiend' ? HTMLElement : Element;
HTMLElement.prototype.addClass = function(string) {
if (!(string instanceof Array)) {
string = string.split(' ');
}
for(var i = 0, len = string.length; i < len; ++i) {
if (string[i] && !new RegExp('(\\s+|^)' + string[i] + '(\\s+|$)').test(this.className)) {
this.className = this.className.trim() + ' ' + string[i];
}
}
}
HTMLElement.prototype.removeClass = function(string) {
if (!(string instanceof Array)) {
string = string.split(' ');
}
for(var i = 0, len = string.length; i < len; ++i) {
this.className = this.className.replace(new RegExp('(\\s+|^)' + string[i] + '(\\s+|$)'), ' ').trim();
}
}
HTMLElement.prototype.toggleClass = function(string) {
if (string) {
if (new RegExp('(\\s+|^)' + string + '(\\s+|$)').test(this.className)) {
this.className = this.className.replace(new RegExp('(\\s+|^)' + string + '(\\s+|$)'), ' ').trim();
} else {
this.className = this.className.trim() + ' ' + string;
}
}
}
HTMLElement.prototype.hasClass = function(string) {
return string && new RegExp('(\\s+|^)' + string + '(\\s+|$)').test(this.className);
}
A następnie wystarczy użyć takiej (na kliknięciu zostanie dodany lub usunąć klasę):
document.getElementById('yourElementId').onclick = function() {
this.toggleClass('active');
}
Oto DEMO.
Aby dodać informacje z innych popularnych ram, zamknięć Google, zobacz ich dom / klas klasa:
goog.dom.classes.add(element, var_args)
goog.dom.classes.addRemove(element, classesToRemove, classesToAdd)
goog.dom.classes.remove(element, var_args)
Jedną z opcji wyboru elementu jest używanie goog.dom.Query z selektorem CSS3:
var myElement = goog.dom.query("#MyElement")[0];
Kilka drobnych notatek i poprawek na poprzedniej regexes:
Będziesz chciał to zrobić na całym świecie w przypadku, gdy lista klasy ma nazwę klasy więcej niż raz. I prawdopodobnie będziesz chciał pasować do spacji z końców listy klas i przekonwertować wiele spacji do jednej przestrzeni, aby stawić czoła biegom przestrzeni. Żadna z tych rzeczy nie powinna być problemem, jeśli jedyny kod dzwoni z nazwami klas używa poniższego regexa i usuwa nazwę przed dodaniem go. Ale. Cóż, kto wie, kto może być dyknącym z listą Nazwa klasy.
Ten regex jest niewrażliwy na przypadek, dzięki czemu błędów w nazwach klas może pojawić się przed użyciem kodu w przeglądarce, która nie dba o przypadek w nazwach klas.
var s = "testing one four one two";
var cls = "one";
var rg = new RegExp("(^|\\s+)" + cls + "(\\s+|$)", 'ig');
alert("[" + s.replace(rg, ' ') + "]");
var cls = "test";
var rg = new RegExp("(^|\\s+)" + cls + "(\\s+|$)", 'ig');
alert("[" + s.replace(rg, ' ') + "]");
var cls = "testing";
var rg = new RegExp("(^|\\s+)" + cls + "(\\s+|$)", 'ig');
alert("[" + s.replace(rg, ' ') + "]");
var cls = "tWo";
var rg = new RegExp("(^|\\s+)" + cls + "(\\s+|$)", 'ig');
alert("[" + s.replace(rg, ' ') + "]");
Używałbym jQuery i napiszę coś takiego:
jQuery(function($) {
$("#some-element").click(function() {
$(this).toggleClass("clicked");
});
});
Kod ten dodaje funkcję, która ma zostać wywołana, gdy kliknął element elementu ID Element . Funkcja dołącza kliknięte do atrybutu klasy elementu, jeśli nie jest już jej częścią, i usuwa, jeśli tam jest.
Tak, musisz dodać odniesienie do biblioteki jQuery na swojej stronie, aby użyć tego kodu, ale przynajmniej możesz czuć się pewnie, że większość funkcji w bibliotece działałaby na prawie wszystkich nowoczesnych przeglądarkach, a zaoszczędzi Ci czas wdrażania własny kod, aby zrobić to samo.
Dzięki
Linia
document.getElementById("MyElement").className = document.getElementById("MyElement").className.replace(/\bMyClass\b/','')
Powinien być:
document.getElementById("MyElement").className = document.getElementById("MyElement").className.replace('/\bMyClass\b/','');
Zmień klasę elementu w wanilii JavaScript z IE6 Support
Możesz spróbować użyć właściwości węzła attributes, aby zachować kompatybilność ze starymi przeglądarkami nawet IE6:
function getClassNode(element) {
for (var i = element.attributes.length; i--;)
if (element.attributes[i].nodeName === 'class')
return element.attributes[i];
}
function removeClass(classNode, className) {
var index, classList = classNode.value.split(' ');
if ((index = classList.indexOf(className)) > -1) {
classList.splice(index, 1);
classNode.value = classList.join(' ');
}
}
function hasClass(classNode, className) {
return classNode.value.indexOf(className) > -1;
}
function addClass(classNode, className) {
if (!hasClass(classNode, className))
classNode.value += ' ' + className;
}
document.getElementById('message').addEventListener('click', function() {
var classNode = getClassNode(this);
var className = hasClass(classNode, 'red') && 'blue' || 'red';
removeClass(classNode, 'red');
removeClass(classNode, 'blue');
addClass(classNode, className);
}).red {
color: red;
}
.red:before {
content: 'I am red! ';
}
.red:after {
content: ' again';
}
.blue {
color: blue;
}
.blue:before {
content: 'I am blue! '
}<span id="message" class="">Click me</span>Oto moja wersja, w pełni działająca:
function addHTMLClass(item, classname) {
var obj = item
if (typeof item=="string") {
obj = document.getElementById(item)
}
obj.className += " " + classname
}
function removeHTMLClass(item, classname) {
var obj = item
if (typeof item=="string") {
obj = document.getElementById(item)
}
var classes = ""+obj.className
while (classes.indexOf(classname)>-1) {
classes = classes.replace (classname, "")
}
obj.className = classes
}
Stosowanie:
<tr onmouseover='addHTMLClass(this,"clsSelected")'
onmouseout='removeHTMLClass(this,"clsSelected")' >
Oto ToggleClass, aby przełączyć / dodać / usunąć klasę na elemencie:
// If newState is provided add/remove theClass accordingly, otherwise toggle theClass
function toggleClass(elem, theClass, newState) {
var matchRegExp = new RegExp('(?:^|\\s)' + theClass + '(?!\\S)', 'g');
var add=(arguments.length>2 ? newState : (elem.className.match(matchRegExp) == null));
elem.className=elem.className.replace(matchRegExp, ''); // clear all
if (add) elem.className += ' ' + theClass;
}
Zobacz JSFiddle
Zobacz także moją odpowiedź Tutaj do tworzenia nowej klasy dynamicznie
Używam następujących funkcji wanilii JavaScript w moim kodzie. Używają wyrażeń regularnych i indexOf, ale nie wymagają cytowania znaków specjalnych w wyrażeniach regularnych.
function addClass(el, cn) {
var c0 = (" " + el.className + " ").replace(/\s+/g, " "),
c1 = (" " + cn + " ").replace(/\s+/g, " ");
if (c0.indexOf(c1) < 0) {
el.className = (c0 + c1).replace(/\s+/g, " ").replace(/^ | $/g, "");
}
}
function delClass(el, cn) {
var c0 = (" " + el.className + " ").replace(/\s+/g, " "),
c1 = (" " + cn + " ").replace(/\s+/g, " ");
if (c0.indexOf(c1) >= 0) {
el.className = c0.replace(c1, " ").replace(/\s+/g, " ").replace(/^ | $/g, "");
}
}
Możesz także użyć Element.Classlist w nowoczesnych przeglądarkach.
OPCJE.
Oto mały styl vs. Listy klasy, aby dostać się do zobaczenia, jakie są opcje, które masz dostępne i jak używać classList, aby zrobić to, co chcesz.
style vs. {X1}}
Różnica między style a classList jest to, że z style dodajesz do właściwości stylu elementu, ale {x3}} jest szybka kontrolowanie klasy (es) element (add, remove, toggle, contain), pokażę Ci, jak używać metody {x8}} i remove, ponieważ są popularni.
Przykład stylu.
Jeśli chcesz dodać nieruchomość margin-top do elementu, zrobiłbyś w takim miejscu:
// Get the Element
const el = document.querySelector('#element');
// Add CSS property
el.style.margintop = "0px"
el.style.margintop = "25px" // This would add a 25px to the top of the element.
Przykład listy klasy
Niech powiedziecie, mamy <div class="class-a class-b">, w tym przypadku mamy już 2 klasy dodane do naszego elementu DIV już, class-a i class-b i chcemy kontrolować jakie klasy {{{ X3}} i jaką klasę {x4}} . To jest miejsce, w którym stanie się przydatny classList.
Usuń class-b
// Get the Element
const el = document.querySelector('#element');
// Remove class-b style from the element
el.classList.remove("class-b")
Dodaj class-c
// Get the Element
const el = document.querySelector('#element');
// Add class-b style from the element
el.classList.add("class-c")
Właśnie pomyślałem, że to wrzucę:
function inArray(val, ary){
for(var i=0,l=ary.length; i<l; i++){
if(ary[i] === val){
return true;
}
}
return false;
}
function removeClassName(classNameS, fromElement){
var x = classNameS.split(/\s/), s = fromElement.className.split(/\s/), r = [];
for(var i=0,l=s.length; i<l; i++){
if(!iA(s[i], x))r.push(s[i]);
}
fromElement.className = r.join(' ');
}
function addClassName(classNameS, toElement){
var s = toElement.className.split(/\s/);
s.push(c); toElement.className = s.join(' ');
}
Po prostu powiedzmy myElement.classList="new-class", chyba że musisz zachować inne istniejące klasy, w którym to przypadku można użyć metod classList.add, .remove.
var doc = document;
var divOne = doc.getElementById("one");
var goButton = doc.getElementById("go");
goButton.addEventListener("click", function() {
divOne.classList="blue";
});div{
min-height:48px;
min-width:48px;
}
.bordered{
border: 1px solid black;
}
.green{
background:green;
}
.blue{
background: blue;
}<button id="go">Change Class</button>
<div id="one" class="bordered green">
</div>OK, myślę, że w tym przypadku powinieneś użyć jQuery lub napisać własne metody w czystym javascript, moje preferencje jest dodawać własne metody, a nie wstrzykiwanie wszystkich jQuery do mojej aplikacji, jeśli nie potrzebuję tego z innych powodów.
Chciałbym zrobić coś takiego jak metody, jak metody mojej JavaScript Framework, aby dodać niewiele funkcjonalności, które obsługują dodatkowe klasy, usuwanie klas itp. Podobnie jak jQuery, jest to w pełni obsługiwane w IE9 +, również mój kod jest napisany w ES6, więc potrzebujesz Aby upewnić się, że Twoja przeglądarka obsługuje go lub używasz czegoś takiego jak Babel, w przeciwnym razie konieczne jest użycie składni ES5 w kodzie, także w ten sposób, znajdziemy element za pomocą ID, co oznacza, że element musi mieć identyfikator, który ma zostać wybrany:
//simple javascript utils for class management in ES6
var classUtil = {
addClass: (id, cl) => {
document.getElementById(id).classList.add(cl);
},
removeClass: (id, cl) => {
document.getElementById(id).classList.remove(cl);
},
hasClass: (id, cl) => {
return document.getElementById(id).classList.contains(cl);
},
toggleClass: (id, cl) => {
document.getElementById(id).classList.toggle(cl);
}
}
I możesz po prostu zadzwonić, użyj ich jak poniżej, wyobraź sobie, że twój element ma identyfikator "ID" i klasy "klasy", upewnij się, że przekazujesz je jako łańcuch, możesz użyć UTIL, jak poniżej:
classUtil.addClass('myId', 'myClass');
classUtil.removeClass('myId', 'myClass');
classUtil.hasClass('myId', 'myClass');
classUtil.toggleClass('myId', 'myClass');
classList DOM API:
Bardzo wygodny sposób dodawania i usuwania klas jest API classList DOM. Ten interfejs API pozwala nam wybrać wszystkie klasy konkretnego elementu Domu, aby zmodyfikować listę przy użyciu JavaScript. Na przykład:
const el = document.getElementById("main");
console.log(el.classList);<div class="content wrapper animated" id="main"></div>Możemy obserwować w dzienniku, który odzyskujemy obiekt z nie tylko klasami elementu, ale także wiele metod i właściwości pomocniczych. Obiekt ten dziedziczy z interfejsu Dominokokenlist , interfejs, który jest używany w DOM, aby reprezentować zestaw kosmicznych żetonów oddzielonych (jak klas).
Przykład:
const el = document.getElementById('container');
function addClass () {
el.classList.add('newclass');
}
function replaceClass () {
el.classList.replace('foo', 'newFoo');
}
function removeClass () {
el.classList.remove('bar');
}button{
margin: 20px;
}
.foo{
color: red;
}
.newFoo {
color: blue;
}
.bar{
background-color:powderblue;
}
.newclass{
border: 2px solid green;
}<div class="foo bar" id="container">
"Sed ut perspiciatis unde omnis
iste natus error sit voluptatem accusantium doloremque laudantium,
totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et
quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam
voluptatem quia voluptas
</div>
<button onclick="addClass()">AddClass</button>
<button onclick="replaceClass()">ReplaceClass</button>
<button onclick="removeClass()">removeClass</button>
Tak, jest wiele sposobów, aby to zrobić. W składni ES6 możemy łatwo osiągnąć. Użyj tego kodu przełączania Dodaj i usuń klasę.
const tabs=document.querySelectorAll('.menu li');
for(let tab of tabs){
tab.onclick=function(){
let activetab=document.querySelectorAll('li.active');
activetab[0].classList.remove('active')
tab.classList.add('active');
}
}body {
padding:20px;
font-family:sans-serif;
}
ul {
margin:20px 0;
list-style:none;
}
li {
background:#dfdfdf;
padding:10px;
margin:6px 0;
cursor:pointer;
}
li.active {
background:#2794c7;
font-weight:bold;
color:#ffffff;
}<i>Please click an item:</i>
<ul class="menu">
<li class="active"><span>Three</span></li>
<li><span>Two</span></li>
<li><span>One</span></li>
</ul>function classed(el, class_name, add_class) {
const re = new RegExp("(?:^|\\s)" + class_name + "(?!\\S)", "g");
if (add_class && !el.className.match(re)) el.className += " " + class_name
else if (!add_class) el.className = el.className.replace(re, '');
}
Korzystanie z przyjętej odpowiedzi powyżej jest prosta funkcja przeglądarki do dodawania i usuwania klasy
Dodaj klasę:
classed(document.getElementById("denis"), "active", true)
Usuń klasę:
classed(document.getElementById("denis"), "active", false)
Próbować
function change(el) { el.className='second' }.first { width: 50px; height: 50px; background: blue }
.second { width: 150px; height: 150px; background: red; transition: all 0.3s ease-in }<button onclick="change(box)">Click me</button>
<div id="box" class="first"></div>Pracujący kod JavaScript:
<div id="div_add" class="div_add">Add class from Javascript</div>
<div id="div_replace" class="div_replace">Replace class from Javascript</div>
<div id="div_remove" class="div_remove">Remove class from Javascript</div>
<button onClick="div_add_class();">Add class from Javascript</button>
<button onClick="div_replace_class();">Replace class from Javascript</button>
<button onClick="div_remove_class();">Remove class from Javascript</button>
<script type="text/javascript">
function div_add_class()
{
document.getElementById("div_add").className += " div_added";
}
function div_replace_class()
{
document.getElementById("div_replace").className = "div_replaced";
}
function div_remove_class()
{
document.getElementById("div_remove").className = "";
}
</script>
Możesz pobrać kod roboczy z Ten link.
Oto prosty kod jQuery, aby to zrobić.
$(".class1").click(function(argument) {
$(".parentclass").removeClass("classtoremove");
setTimeout(function (argument) {
$(".parentclass").addClass("classtoadd");
}, 100);
});
Tutaj,
- Class1 jest słuchaczym dla wydarzenia.
- Klasa nadrzędna to klasa, która organizuje klasę, którą chcesz zmienić
- Classtoremove jest starą klasą, którą masz.
- Klasa do dodania jest nowa klasa, którą chcesz dodać.
- 100 to opóźnienie limitu czasu, w którym klasa zmienia się.
Powodzenia.
Istnieje właściwość nazwa klasy w JavaScript, aby zmienić nazwę klasy elementu HTML. Istniejąca wartość klasy zostanie zastąpiona nową, którą przydzielono w nazwie klasy.
<!DOCTYPE html>
<html>
<head>
<title>How to change class of an HTML element in Javascript?</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<h1 align="center"><i class="fa fa-home" id="icon"></i></h1><br />
<center><button id="change-class">Change Class</button></center>
<script>
var change_class=document.getElementById("change-class");
change_class.onclick=function()
{
var icon=document.getElementById("icon");
icon.className="fa fa-gear";
}
</script>
</body>
</html>
Zmień klasę CSS Element z JavaScript w ASP.NET:
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
If Not Page.IsPostBack Then
lbSave.Attributes.Add("onmouseover", "this.className = 'LinkButtonStyle1'")
lbSave.Attributes.Add("onmouseout", "this.className = 'LinkButtonStyle'")
lbCancel.Attributes.Add("onmouseover", "this.className = 'LinkButtonStyle1'")
lbCancel.Attributes.Add("onmouseout", "this.className = 'LinkButtonStyle'")
End If
End Sub