JavaScript를 사용하여 onclick 또는 기타 이벤트에 대한 응답으로 HTML 요소의 클래스를 변경하려면 어떻게 해야 합니까?
반응형
질문자 :Nathan Smith
클래스 변경을 위한 최신 HTML5 기술
최신 브라우저에는 라이브러리 없이 클래스를 더 쉽게 조작할 수 있는 메서드를 제공하는 classList가 추가되었습니다.
document.getElementById("MyElement").classList.add('MyClass'); document.getElementById("MyElement").classList.remove('MyClass'); if ( document.getElementById("MyElement").classList.contains('MyClass') ) document.getElementById("MyElement").classList.toggle('MyClass');불행히도 v10 이전의 Internet Explorer에서는 작동하지 않지만 이 페이지 에서 사용할 수 있는 IE8 및 IE9에 대한 지원을 추가 하는 shim 이 있습니다. 그러나 점점 더 많은 지원을 받고 있습니다.
간단한 크로스 브라우저 솔루션
요소를 선택하는 표준 JavaScript 방법 document.getElementById("Id") 를 사용하는 것입니다. 물론 다른 방법으로 요소를 얻을 수 있으며 올바른 상황에서는 단순히 this 대신 사용할 수 있습니다. 이에 대한 자세한 내용은 답변 범위를 벗어납니다.
요소의 모든 클래스를 변경하려면:
모든 기존 클래스를 하나 이상의 새 클래스로 바꾸려면 className 속성을 설정하십시오.
document.getElementById("MyElement").className = "MyClass";(공백으로 구분된 목록을 사용하여 여러 클래스를 적용할 수 있습니다.)
요소에 추가 클래스를 추가하려면:
기존 값을 제거/영향을 주지 않고 요소에 클래스를 추가하려면 다음과 같이 공백과 새 클래스 이름을 추가합니다.
document.getElementById("MyElement").className += " MyClass";요소에서 클래스를 제거하려면:
다른 잠재적 클래스에 영향을 주지 않고 요소에 대한 단일 클래스를 제거하려면 간단한 정규식 바꾸기가 필요합니다.
document.getElementById("MyElement").className = document.getElementById("MyElement").className.replace ( /(?:^|\s)MyClass(?!\S)/g , '' ) /* Code wrapped for readability - above is all one statement */이 정규식에 대한 설명은 다음과 같습니다.
(?:^|\s) # Match the start of the string or any single whitespace character MyClass # The literal text for the classname to remove (?!\S) # Negative lookahead to verify the above is the whole classname # Ensures there is no non-space character following # (ie must be the end of the string or space) g 플래그는 클래스 이름이 여러 번 추가된 경우 필요에 따라 교체를 반복하도록 지시합니다.
클래스가 이미 요소에 적용되었는지 확인하려면:
위에서 클래스를 제거하는 데 사용한 것과 동일한 정규식은 특정 클래스가 존재하는지 여부를 확인하는 데 사용할 수도 있습니다.
if ( document.getElementById("MyElement").className.match(/(?:^|\s)MyClass(?!\S)/) )### onclick 이벤트에 다음 작업 할당:
onclick="this.className+=' MyClass'" ) 내에서 직접 JavaScript를 작성할 수 있지만 이는 권장되지 않는 동작입니다. 특히 더 큰 응용 프로그램에서는 HTML 마크업을 JavaScript 상호 작용 논리와 분리하여 유지 관리하기 쉬운 코드를 얻을 수 있습니다.
이를 달성하기 위한 첫 번째 단계는 함수를 만들고 onclick 속성에서 함수를 호출하는 것입니다. 예를 들면 다음과 같습니다.
<script type="text/javascript"> function changeClass(){ // Code examples from above } </script> ... <button onclick="changeClass()">My Button</button>(스크립트 태그에 이 코드를 포함할 필요는 없습니다. 이는 단순히 예제를 간략하게 하기 위한 것이며 별도의 파일에 JavaScript를 포함하는 것이 더 적절할 수 있습니다.)
두 번째 단계는 예를 들어 addEventListener 를 사용하여 HTML에서 JavaScript로 onclick 이벤트를 이동하는 것입니다.
<script type="text/javascript"> function changeClass(){ // Code examples from above } window.onload = function(){ document.getElementById("MyElement").addEventListener( 'click', changeClass); } </script> ... <button id="MyElement">My Button</button>(window.onload 부분은 HTML 로드가 완료된 후 해당 함수의 내용이 실행되도록 해야 합니다. 이 부분이 없으면 JavaScript 코드가 호출될 때 MyElement가 존재하지 않아 해당 줄이 실패할 수 있습니다.)
JavaScript 프레임워크 및 라이브러리
위의 코드는 모두 표준 JavaScript로 되어 있지만 프레임워크나 라이브러리를 사용하여 일반적인 작업을 단순화하고 코드를 작성할 때 생각하지 못할 수 있는 수정된 버그 및 엣지 케이스의 이점을 얻는 것이 일반적입니다.
어떤 사람들은 단순히 클래스를 변경하기 위해 ~50KB 프레임워크를 추가하는 것이 과하다고 생각하지만 상당한 양의 JavaScript 작업을 수행하거나 브라우저 간 비정상적인 동작이 있을 수 있는 작업을 수행하는 경우 고려해 볼 가치가 있습니다.
(대략적으로 라이브러리는 특정 작업을 위해 설계된 도구 세트인 반면, 프레임워크는 일반적으로 여러 라이브러리를 포함하고 완전한 임무 세트를 수행합니다.)
위의 예제는 아마도 가장 일반적으로 사용되는 JavaScript 라이브러리인 jQuery를 사용하여 아래에 재현되었습니다(조사할 가치가 있는 다른 라이브러리도 있음).
( $ 는 jQuery 객체입니다.)
jQuery로 클래스 변경:
$('#MyElement').addClass('MyClass'); $('#MyElement').removeClass('MyClass'); if ( $('#MyElement').hasClass('MyClass') )또한 jQuery는 적용되지 않는 클래스를 추가하거나 적용되는 클래스를 제거하기 위한 바로 가기를 제공합니다.
$('#MyElement').toggleClass('MyClass');### jQuery를 사용하여 클릭 이벤트에 함수 할당:
$('#MyElement').click(changeClass);또는 ID가 필요하지 않은 경우:
$(':button:contains(My Button)').click(changeClass);Peter Boughton
다음과 같이 할 수도 있습니다.
document.getElementById('id').classList.add('class'); document.getElementById('id').classList.remove('class');그리고 클래스를 토글하려면(존재하는 경우 제거하고 추가):
document.getElementById('id').classList.toggle('class');Tyilo
jQuery를 사용하지 않은 이전 프로젝트 중 하나에서 요소에 클래스가 있는지 추가, 제거 및 확인하는 다음 함수를 만들었습니다.
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, ' '); } } 예를 들어 onclick 을 사용하여 버튼에 클래스를 추가하려면 다음을 사용할 수 있습니다.
<script type="text/javascript"> function changeClass(btn, cls) { if(!hasClass(btn, cls)) { addClass(btn, cls); } } </script> ... <button onclick="changeClass(this, "someClass")">My Button</button>지금쯤이면 확실히 jQuery를 사용하는 것이 더 나을 것입니다.
Andrew Orsich
node.className 과 같이 node.className을 사용할 수 있습니다.
document.getElementById('foo').className = 'bar';이것은 PPK 에 따라 Internet Explorer 5.5 이상 에서 작동해야 합니다.
Eric Wendelin
와, 여기에 너무 많은 과잉 답변이 있다는 것에 놀랐습니다 ...
<div class="firstClass" onclick="this.className='secondClass'">Travis J
순수 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); } }PseudoNinja
이것은 나를 위해 일하고 있습니다.
function setCSS(eleID) { var currTabElem = document.getElementById(eleID); currTabElem.setAttribute("class", "some_class_name"); currTabElem.setAttribute("className", "some_class_name"); }Gopal Krishna Ranjan
또한 HTMLElement 객체를 확장하여 클래스( 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); }그런 다음 다음과 같이 사용하십시오(클릭하면 클래스가 추가되거나 제거됨).
document.getElementById('yourElementId').onclick = function() { this.toggleClass('active'); }여기 데모가 있습니다.
moka
다른 인기 있는 프레임워크인 Google Closures의 정보를 추가하려면 해당 dom/classes 클래스를 참조하세요.
goog.dom.classes.add(element, var_args) goog.dom.classes.addRemove(element, classesToRemove, classesToAdd) goog.dom.classes.remove(element, var_args)요소를 선택하는 한 가지 옵션은 CSS 3 선택기와 함께 goog.dom.query를 사용하는 것입니다.
var myElement = goog.dom.query("#MyElement")[0];Ben Flynn
이전 정규식에 대한 몇 가지 사소한 메모 및 조정:
클래스 목록에 클래스 이름이 두 번 이상 있는 경우를 대비하여 전역적으로 수행하고 싶을 것입니다. 그리고 아마도 클래스 목록의 끝에서 공백을 제거하고 여러 공백을 하나의 공백으로 변환하여 공백이 발생하지 않도록 하고 싶을 것입니다. 클래스 이름을 사용하는 유일한 코드가 아래 정규식을 사용하고 이름을 추가하기 전에 제거하는 경우 이러한 사항 중 어느 것도 문제가 되지 않습니다. 하지만. 글쎄, 누가 클래스 이름 목록을 가지고 놀고 있을지 누가 알겠는가.
이 정규식은 대소문자를 구분하지 않으므로 클래스 이름의 대소문자를 신경 쓰지 않는 브라우저에서 코드를 사용하기 전에 클래스 이름의 버그가 나타날 수 있습니다.
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, ' ') + "]");Alex Robinson
ASP.NET 에서 JavaScript를 사용하여 요소의 CSS 클래스 변경:
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 SubHiren Kansara
jQuery를 사용하여 다음과 같이 작성합니다.
jQuery(function($) { $("#some-element").click(function() { $(this).toggleClass("clicked"); }); });이 코드는 id some-element의 요소 를 클릭할 때 호출될 함수를 추가합니다. 이 함수는 요소의 클래스 속성에 아직 포함되어 있지 않은 경우 clicked를 추가하고 존재하는 경우 제거합니다.
예, 이 코드를 사용하려면 페이지에 jQuery 라이브러리에 대한 참조를 추가해야 하지만 최소한 라이브러리에 있는 대부분의 기능이 거의 모든 최신 브라우저에서 작동할 것이라고 확신할 수 있으며 시간을 절약할 수 있습니다. 동일한 작업을 수행하기 위해 자신의 코드를 구현합니다.
shingokko
라인
document.getElementById("MyElement").className = document.getElementById("MyElement").className.replace(/\bMyClass\b/','')해야한다:
document.getElementById("MyElement").className = document.getElementById("MyElement").className.replace('/\bMyClass\b/','');Eric Bailey
Internet Explorer 6 지원으로 바닐라 JavaScript에서 요소의 클래스 변경
Internet Explorer 6을 포함한 이전 브라우저와의 호환성을 유지하기 위해 attributes 속성을 사용할 수 있습니다.
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>Eugene Tiurin
완전히 작동하는 내 버전은 다음과 같습니다.
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 }용법:
<tr onmouseover='addHTMLClass(this,"clsSelected")' onmouseout='removeHTMLClass(this,"clsSelected")' >alfred
다음은 요소의 클래스를 토글/추가/제거하는 toggleClass입니다.
// 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; }JSFiddle을 참조하십시오.
또한 내 대답을 참조 여기에 새로운 클래스를 동적으로 생성을위한.
kofifus
내 코드에서 다음 바닐라 JavaScript 함수를 사용합니다. 정규식과 indexOf 하지만 정규식에서 특수 문자를 인용할 필요는 없습니다.
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, ""); } }최신 브라우저에서 element.classList 를 사용할 수도 있습니다.
Salman A
OP 질문은 JavaScript로 요소의 클래스를 어떻게 변경할 수 있습니까?
최신 브라우저를 사용하면 JavaScript 한 줄로 이 작업을 수행할 수 있습니다.
document.getElementById('id').classList.replace('span1', 'span2')
classList 특성은 갖는 DOMTokenList 제공 방법의 다양한 . add() , remove() 또는 replace() 와 같은 간단한 조작을 사용하여 요소의 classList에서 작업할 수 있습니다. 또는 keys() , values() 및 entries() 를 사용하여 객체 또는 Map 처럼 매우 정교하고 클래스를 조작하십시오.
Peter Boughton의 답변 은 훌륭하지만 이제 10년이 넘었습니다. 모든 최신 브라우저는 이제 DOMTokenList를 지원합니다. https://caniuse.com/#search=classList를 참조하세요. Internet Explorer 11도 일부 DOMTokenList 메서드를 지원합니다.
timbo
옵션.
다음은 사용 가능한 옵션과 원하는 작업을 수행 classList 를 사용하는 방법을 볼 수 있는 약간의 스타일 대 classList 예제입니다.
style 대 classList
차이 style 과 classList 함께 있다는 것입니다 style 이 요소의 스타일 속성에 추가하고 있지만 classList 좀 요소 (의 클래스 (들) 제어하는 add , remove , toggle , contain ) 어떻게, 난 당신을 보여줍니다 add 및 remove 방법이 널리 사용되므로 사용하십시오.
스타일 예
margin-top 속성을 추가하려면 다음과 같이 하면 됩니다.
// 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.클래스 목록 예
<div class="class-a class-b"> 가 있다고 가정해 보겠습니다. 이 경우 div 요소에 이미 class-a 와 class-b 라는 2개의 클래스가 추가되어 있고 제거할 클래스를 제어하려고 remove add 할 클래스 . 여기서 classList 가 편리해집니다.
class-b 제거
// Get the Element const el = document.querySelector('#element'); // Remove class-b style from the element el.classList.remove("class-b") class-c 추가
// Get the Element const el = document.querySelector('#element'); // Add class-b style from the element el.classList.add("class-c")Brian Nezhad
노력하다:
element.className='second' function change(box) { box.className='second' } .first { width: 70px; height: 70px; background: #ff0 } .second { width: 150px; height: 150px; background: #f00; transition: 1s } <div onclick="change(this)" class="first">Click me</div>Kamil Kiełczewski
좋습니다. 이 경우 jQuery를 사용하거나 순수 JavaScript로 고유한 메서드를 작성해야 한다고 생각합니다. 내 기본 설정은 다른 이유로 필요하지 않은 경우 모든 jQuery를 내 응용 프로그램에 주입하는 것보다 내 자신의 메서드를 추가하는 것입니다.
클래스 추가, 클래스 삭제 등을 처리하는 몇 가지 기능을 추가하기 위해 JavaScript 프레임워크에 메서드로 아래와 같은 작업을 수행하고 싶습니다. jQuery와 유사하게 이것은 IE9+에서 완전히 지원됩니다. 또한 내 코드는 ES6으로 작성되었으므로 브라우저가 이를 지원하는지 확인하거나 Babel 과 같은 것을 사용하는지 확인해야 합니다. 그렇지 않으면 코드에서 ES5 구문을 사용해야 합니다. 또한 이 방법으로 ID를 통해 요소를 찾습니다. 즉, 요소에 선택하려면 ID가 있어야 합니다.
// Simple JavaScript utilities 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); } }그리고 아래와 같이 간단하게 사용할 수 있습니다. 요소에 'id'의 id와 'class'의 클래스가 있다고 상상해보십시오. 문자열로 전달해야 합니다. 다음과 같이 유틸리티를 사용할 수 있습니다.
classUtil.addClass('myId', 'myClass'); classUtil.removeClass('myId', 'myClass'); classUtil.hasClass('myId', 'myClass'); classUtil.toggleClass('myId', 'myClass');Alireza
classList DOM API:
클래스를 추가하고 제거하는 매우 편리한 방법은 classList DOM API입니다. 이 API를 사용하면 JavaScript를 사용하여 목록을 수정하기 위해 특정 DOM 요소의 모든 클래스를 선택할 수 있습니다. 예를 들어:
const el = document.getElementById("main"); console.log(el.classList); <div class="content wrapper animated" id="main"></div>로그에서 요소의 클래스뿐만 아니라 많은 보조 메서드 및 속성이 포함된 개체를 다시 가져오는 것을 볼 수 있습니다. 이 객체는 DOMTokenList 인터페이스에서 상속합니다. 이 인터페이스는 DOM에서 클래스와 같이 공백으로 구분된 토큰 집합을 나타내는 데 사용되는 인터페이스입니다.
예시:
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>Willem van der Veen
예, 여러 가지 방법이 있습니다. ES6 구문에서는 쉽게 달성할 수 있습니다. 이 코드를 사용하여 클래스 추가 및 제거를 토글하십시오.
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>Danish Khan
나는 이것을 던질 것이라고 생각했다.
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(' '); }StackSlave
classList.add, .remove 메소드를 사용할 수 있는 다른 기존 클래스를 유지 관리해야 하는 경우가 아니면 myElement.classList="new-class"
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>Ronnie Royston
TL;DR:
document.getElementById('id').className = 'class'또는
document.getElementById('id').classList.add('class'); document.getElementById('id').classList.remove('class');그게 다야
그리고 그 이유를 알고 자신을 교육하고 싶다면 Peter Boughton의 답변을 읽는 것이 좋습니다. 그것은 완벽.
메모:
-
getElementById() -
getElementsByClassName() -
querySelector() -
querySelectorAll()
tfont
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, ''); }Peter Boughton의 답변을 사용하여 다음은 클래스를 추가하고 제거하는 간단한 크로스 브라우저 기능입니다.
수업 추가:
classed(document.getElementById("denis"), "active", true)수업 제거:
classed(document.getElementById("denis"), "active", false)donatso
JavaScript에는 HTML 요소의 클래스 이름을 변경하는 className 속성이 있습니다. 기존 클래스 값은 className에 할당한 새 값으로 대체됩니다.
<!DOCTYPE html> <html> <head> <title>How can I change the 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>Jai Prakash
.classList.add('calss') 사용하여 새 클래스를 추가할 수 있습니다.
document.getElementById('id').classList.add('class'); .classList.remove('calss') 사용하여 클래스를 제거할 수 있습니다.
document.getElementById('id').classList.remove('class');그리고 클래스를 토글하려면(존재하는 경우 제거하고 추가):
document.getElementById('id').classList.toggle('class');Tharindu Lakshan
간단히 말해서 요소에서 수행할 수 있는 3가지 다른 작업이 있습니다.
- 새 수업 추가
- 이전 클래스 제거
- 클래스 토글(클래스가 있으면 제거하고 클래스가 없으면 추가)
그러나 여기서는 새 클래스를 추가하고 이전 클래스를 제거하는 데만 관심이 있습니다.
두 가지 방법이 있습니다.
요소의 classList 속성의 추가 및 제거 방법을 사용합니다 .
element.classList.remove(old_class_name)있는element.classList.add(class_name)) . 새 클래스를 추가하고 이전 클래스를 제거합니다.전체 코드
function changeClass() { const element = document.getElementById("id1"); element.classList.add("new-class"); element.classList.remove("old-class"); }.old-class { background: lightpink } .new-class { background: lightgreen }<div class="old-class" id="id1">My div element.</div> <button onclick="changeClass()">Change class</button>요소의 className 속성을 사용합니다 .
element.className = new_class. 이것은 요소의 모든 이전 클래스를 대체합니다.function changeClass() { const element = document.getElementById("id1"); element.className = "new-class"; }.old-class { background: lightpink } .new-class { background: lightgreen }<div class="old-class" id="id1">My div element.</div> <button onclick="changeClass()">Change class</button>
Satish Chandra Gupta
출처 : http:www.stackoverflow.com/questions/195951/how-can-i-change-an-elements-class-with-javascript
반응형
'etc. > StackOverFlow' 카테고리의 다른 글
| scp를 사용하여 원격에서 로컬로 폴더를 어떻게 복사합니까? (0) | 2021.10.09 |
|---|---|
| 웹 양식 필드/입력 태그에서 브라우저 자동 완성을 어떻게 비활성화합니까? (0) | 2021.10.09 |
| jQuery를 사용하여 어떻게 파일을 비동기적으로 업로드할 수 있습니까? (0) | 2021.10.09 |
| 원격 Git 브랜치를 어떻게 생성합니까? (0) | 2021.10.09 |
| 어떻게 int를 열거형으로 캐스팅할 수 있습니까? (0) | 2021.10.09 |