JavaScript를 사용하여 요소의 클래스를 변경하려면 어떻게 해야 합니까?
에 대한 응답으로 해야 합니까?onclick자바스크립트?
클래스 변경을 위한 최신 HTML5 기술
최신 브라우저에는 클래스 리스트가 추가되어 라이브러리를 필요로 하지 않고 클래스를 쉽게 조작할 수 있습니다.
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에 대한 지원을 추가하기 위한 심이 이 페이지에서 제공됩니다.하지만 점점 더 많은 지원을 받고 있습니다.
간단한 크로스 브라우저 솔루션
요소를 선택하는 표준 JavaScript 방법은 다음과 같은 예를 사용합니다.물론 다른 방법으로 요소를 얻을 수 있으며 적절한 상황에서는 단순히 사용할 수 있습니다.this대신, 이에 대한 자세한 내용은 답변의 범위를 벗어납니다.
요소의 모든 클래스를 변경하려면:
모든 기존 클래스를 하나 이상의 새 클래스로 바꾸려면 className 속성을 설정합니다.
document.getElementById("MyElement").className = "MyClass";
(스페이스 구분 리스트를 사용하여 여러 클래스를 적용할 수 있습니다).
요소에 클래스를 추가하려면:
기존 값을 제거하거나 영향을 주지 않고 요소에 클래스를 추가하려면 다음과 같이 공백과 새 클래스 이름을 추가합니다.
document.getElementById("MyElement").className += " MyClass";
요소에서 클래스를 제거하려면:
다른 잠재적 클래스에 영향을 주지 않고 하나의 클래스를 요소에서 제거하려면 간단한 regex 치환이 필요합니다.
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
# (i.e. must be the end of the string or space)
gflag는 클래스 이름이 여러 번 추가된 경우 필요에 따라 바꾸기를 지시합니다.
클래스가 요소에 이미 적용되었는지 확인하려면:
위에서 클래스 삭제에 사용한 것과 동일한 regex를 특정 클래스가 존재하는지 여부를 확인하는 데 사용할 수도 있습니다.
if ( document.getElementById("MyElement").className.match(/(?:^|\s)MyClass(?!\S)/) )
### Assigning these actions to onclick events:
HTML JavaScript 등) 를 쓸 수 JavaScript는 쓸 수 없습니다.onclick="this.className+=' MyClass'"되지 않는 이것은 권장되지 않는 동작입니다.특히 대규모 어플리케이션에서는 HTML 마크업을 JavaScript 인터랙션 로직에서 분리함으로써 유지보수가 용이한 코드를 얻을 수 있습니다.
이를 실현하기 위한 첫 번째 단계는 함수를 만들고 온클릭 속성으로 함수를 호출하는 것입니다.다음은 예를 제시하겠습니다.
<script type="text/javascript">
function changeClass(){
// Code examples from above
}
</script>
...
<button onclick="changeClass()">My Button</button>
(이 코드를 스크립트태그에 포함할 필요는 없습니다.단순히 예를 들어 보겠습니다.또한 JavaScript를 다른 파일에 포함하는 것이 더 적절할 수 있습니다.)
두 번째 단계는 예를 들어 addEventListener를 사용하여 온클릭이벤트를 HTML에서 JavaScript로 이동하는 것입니다.
<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를 사용하여 아래에 재현되어 있습니다(조사할 가치가 있는 다른 라이브러리도 있습니다).
:$j쿼리
jQuery를 사용한 클래스 변경:
$('#MyElement').addClass('MyClass');
$('#MyElement').removeClass('MyClass');
if ( $('#MyElement').hasClass('MyClass') )
또한 jQuery는 해당되지 않는 경우 클래스를 추가하거나 다음 작업을 수행하는 클래스를 제거하기 위한 바로 가기를 제공합니다.
$('#MyElement').toggleClass('MyClass');
### Assigning a function to a click event with jQuery:
$('#MyElement').click(changeClass);
또는 ID가 필요 없는 경우:
$(':button:contains(My Button)').click(changeClass);
다음 작업을 수행할 수도 있습니다.
document.getElementById('id').classList.add('class');
document.getElementById('id').classList.remove('class');
클래스를 전환하려면(존재하는 경우 제거하거나 클래스를 추가합니다).
document.getElementById('id').classList.toggle('class');
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를 사용하는 것이 좋습니다.
하시면 됩니다.node.className다음과 같이 합니다.
document.getElementById('foo').className = 'bar';
PPK에 따르면 Internet Explorer 5.5 이상에서 작동합니다.
와, 여기 너무 많은 과잉 답변이 있다니 놀랍네요...
<div class="firstClass" onclick="this.className='secondClass'">
순수 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);
}
}
이것은 나에게 효과가 있다.
function setCSS(eleID) {
var currTabElem = document.getElementById(eleID);
currTabElem.setAttribute("class", "some_class_name");
currTabElem.setAttribute("className", "some_class_name");
}
가능한 4가지 액션:추가, 삭제, 확인 및 전환
각 액션에 대해 여러 가지 방법을 알아보겠습니다.
1. 클래스 추가
방법 1: 최신 브라우저에서 클래스를 추가하는 가장 좋은 방법은classList.add()요소법
케이스 1: 단일 클래스 추가
function addClass() { let element = document.getElementById('id1'); // adding class element.classList.add('beautify'); }케이스 2: 여러 클래스 추가
하는 경우
add()function addClass() { let element = document.getElementById('id1'); // adding multiple class element.classList.add('class1', 'class2', 'class3'); }
방법 2 - 다음을 사용하여 HTML 요소에 클래스를 추가할 수도 있습니다.className★★★★★★★★★★★★★★★★★★.
- 케이스 1: 기존 클래스 덮어쓰기 새 클래스를 에 할당할 때
className이전 클래스를 덮어씁니다.function addClass() { let element = document.getElementById('id1'); // adding multiple class element.className = 'beautify'; } - 케이스 2: 덮어쓰기를 사용하지 않고 클래스
+=이전 클래스를 덮어쓰지 않도록 클래스 연산자를 지정합니다.또한 새 수업 전에 추가 공간을 추가합니다.function addClass() { let element = document.getElementById('id1'); // adding single multiple class element.className += ' beautify'; // adding multiple classes element.className += ' class1 class2 class3'; }
2. 클래스 삭제
방법 1 - 요소에서 클래스를 삭제하는 가장 좋은 방법은classList.remove()★★★★★★ 。
케이스 1: 단일 클래스 삭제
메서드의 요소에서 제거할 클래스 이름을 전달하기만 하면 됩니다.
function removeClass() { let element = document.getElementById('id1'); // removing class element.classList.remove('beautify'); }케이스 2: 여러 클래스 삭제
여러 클래스를 콤마로 구분하여 전달합니다.
function removeClass() { let element = document.getElementById('id1'); // removing class element.classList.remove('class1', 'class2', 'class3'); }
방법 2 - 다음을 사용하여 클래스를 제거할 수도 있습니다.className★★★★★★ 。
- 케이스 1: 단일 클래스 삭제 요소에 클래스가1개밖에 없고 삭제할 경우 빈 문자열을 에 할당합니다.
className★★★★★★ 。function removeClass() { let element = document.getElementById('id1'); // removing class element.className = ''; } - 케이스 2: 여러 클래스 삭제 요소가 여러 클래스를 가진 경우 첫 번째 요소는 다음을 사용하여 요소에서 모든 클래스를 가져옵니다.
className및 빈으로 replace를 element합니다.className★★★★★★★★★★★★★★★★★★.function removeClass() { let element = document.getElementById('id1'); // removing class element.className = element.className.replace('class1', ''); }
3. 수업 확인
요소에 클래스가 있는지 확인하려면 메소드를 사용하면 됩니다.다시 돌아오다true거짓
function checkClass() {
let element = document.getElementById('id1');
// checking class
if(element.classList.contains('beautify') {
alert('Yes! class exists');
}
}
4. 클래스 전환
클래스를 전환하려면 메서드를 사용합니다.
function toggleClass() {
let element = document.getElementById('id1');
// toggle class
element.classList.toggle('beautify');
}
또한 클래스(gist) 추가, 삭제, 전환 및 체크 메서드를 추가하기 위해 HTMLement 개체를 확장할 수도 있습니다.
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');
}
여기 데모입니다.
또 다른 인기 프레임워크인 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)
요소를 선택하는 옵션 중 하나는 goog.dom을 사용하는 것입니다.CSS 3 셀렉터를 사용한 쿼리:
var myElement = goog.dom.query("#MyElement")[0];
이전 regexes에 가벼운 지폐와 tweaks의 두가지는 다음과 같다.
당신은 전 세계에 반 친구들 명단 한번 이상 클래스 이름이 있고 경우에 그러고 싶을 것이다.그리고 당신은 아마 반 친구들 명단의 끝에서 한 공간에 공간을 얻은 것을 막기 위해 여러 공간 변환한 공간을 발가벗기고 싶겠습니다.이들 중 어느 것도가 별 문제 만일 유일한 코드가 클래스 이름으로 dinking고 추가하기 전에 이름을을 옮기는 regex 아래를 사용한다.하지만. 음, 클래스 이름 목록과 dinking 안다.
그래서 수업이 이름 속에서 벌레기 전에 코드 사건에 대해 클래스 이름도 신경 쓰지 않는 브라우저에서 사용되고 있어 나타날 수 있이 regex 사건은 미련한 짓이다.
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, ' ') + "]");
자바 스크립트 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
나는 이렇게 글을 쓰다:jQuery를 사용할 것입니다.
jQuery(function($) {
$("#some-element").click(function() {
$(this).toggleClass("clicked");
});
});
이 코드는 기능할 때는 이드 some-element의 요소 클릭되라고 할 생각을 더해 준다.그것의 문제가 아니라 이미 일부 함수는 요소의 수업 특성을 클릭하고, 만일 그것이 있고요 제거됩니다.
예, jQuery도서관에 당신의 페이지에 이 코드를 사용하여에 대한 참조를 추가할 수 있지만 적어도 당신은 도서관의 대부분의 기능이 아직 많이 현대 브라우저에 속아 넘어갈 자신감을 갖을 수 있고, 여러분도 똑같이 해 여러분의 코드 구현하는 시간을 절약할 수 필요가 있다.
그 라인
document.getElementById("MyElement").className = document.getElementById("MyElement").className.replace(/\bMyClass\b/','')
야 한다.
document.getElementById("MyElement").className = document.getElementById("MyElement").className.replace('/\bMyClass\b/','');
바닐라 자바 스크립트에서 인터넷 익스플로러 6지원을 가진 요소의 수업을 변경한다.
당신은수 있다 노력할노드를 사용하려고 당신은이 노드를 사용하려고 노력할 수 있다.attributes재산 오래 된 브라우저, 심지어 인터넷 익스플로러 6:오래된 브라우저(InternetExplorer6도 포함)와의호환성을유지하기위한 속성과의 호환성을 유지하기:.
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>내 버전은 다음과 같습니다.
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")' >
요소의 클래스를 전환/추가/삭제하는 토글 클래스는 다음과 같습니다.
// 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」을 참조해 주세요.
또한 동적으로 새 클래스를 만드는 방법에 대한 답변은 여기를 참조하십시오.
나는 내 코드에 다음 바닐라 자바 스크립트 기능을 사용한다.코드에 다음과 같은 바닐라 자바스크립트 함수를 사용하고 있습니다.그들은 규칙적으로 표현과정규표현도 쓰고를 사용한다.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를 사용할 수 있습니다.
OP 질문은 JavaScript로 요소의 클래스를 변경하는 방법이었다.
최신 브라우저에서는 한 줄의 JavaScript를 사용하여 이를 수행할 수 있습니다.
document.getElementById('id').classList.replace('span1', 'span2')
classListattribute는 다양한 메서드를 가진 DOMTOkenList를 제공합니다.요소의 classList에서는 add(), remove() 또는 replace() 등의 간단한 조작을 사용하여 조작할 수 있습니다.또는 객체나 맵에서 키(), 값() 및 항목()을 사용하는 것처럼 매우 정교하게 클래스를 조작할 수 있습니다.
Peter Boyon의 대답은 훌륭하지만, 지금은 10년이 넘었습니다.현재 최신 브라우저는 모두 DOMTokenList를 지원하고 있습니다.https://caniuse.com/ #search=classList를 참조해 주세요.또, Internet Explorer 11에서도 일부의 DOMTokenList 메서드가 지원됩니다.
옵션
여기classList 예 vs 작은 스타일을 당신이 사용 가능한 가지고 옵션 및 어떻게 다음은 사용할 사용 가능한 옵션과 사용 방법을 보여주는 스타일과classList의 예를 제시하겠습니다를 보게끔 하는 것이다.classList당신이 원하는 일을 하려면.하고 싶은 걸 할 수 있어요
style vs. classList
의의 차이는 차이점style ★★★★★★★★★★★★★★★★★」classList있고 이면style허공의 스타일 속성에지만스타일 속성에 추가하지만 요소의 더해 줄것입니다.classList자꾸 지루해 져만 가 있는 요소의 class(에스)(는 요소의 클래스를 제어하고 있습니다(통제하고 있나.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.
classList의 예시
''가 칩시다.<div class="class-a class-b">, 즉 2가 추가되어 class-a ★★★★★★★★★★★★★★★★★」class-b그리고 어떤 클래스와 어떤 클래스를 제어하고 싶습니다.여기가 바로 그 장소입니다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")
시험:
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>(IE v6-9의 )classList지원되지 않으므로 폴리필을 사용하지 마십시오).
var elem = document.getElementById('some-id');
// don't forget the extra space before the class name
var classList = elem.getAttribute('class') + ' other-class-name';
elem.setAttribute('class', classList);
네, 이 경우 jQuery를 사용하거나 순수 JavaScript로 자신만의 메서드를 작성해야 한다고 생각합니다.다른 이유로 jQuery가 필요 없는 경우 응용 프로그램에 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');
classListDOM API:
및 삭제에 은 [클래스 추가 및 입니다.classListDOM 이 하면 JavaScript를 위해 특정 를 선택할 수 .이 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>네, 여러 가지 방법이 있습니다.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>그냥 이걸 넣으려고 했는데
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(' ');
}
쓰세요.myElement.classList="new-class"한, 이 할 수 .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>TL;DR:
document.getElementById('id').className = 'class'
또는
document.getElementById('id').classList.add('class');
document.getElementById('id').classList.remove('class');
바로 그겁니다.
그리고, 당신이 정말로 이유를 알고 싶고 스스로 교육하고 싶다면, 나는 Peter Boyon의 답을 읽을 것을 제안합니다.그것은 완벽해요.
주의:
getElementById()getElementsByClassName()querySelector()querySelectorAll()
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 Boyon의 답변을 사용하여 클래스를 추가 및 삭제하는 간단한 크로스 브라우저 기능을 소개합니다.
클래스 추가:
classed(document.getElementById("denis"), "active", true)
클래스 삭제:
classed(document.getElementById("denis"), "active", false)
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>
크레딧 - JavaScript에서 HTML 요소의 클래스 이름을 변경하는 방법
언급URL : https://stackoverflow.com/questions/195951/how-can-i-change-an-elements-class-with-javascript
'programing' 카테고리의 다른 글
| C# String과 동등한 Java.Format() 및 String.참가() (0) | 2022.09.05 |
|---|---|
| HTML5에서 비디오 재생 속도를 변경하는 방법 (0) | 2022.09.05 |
| 자바에서 두 날짜의 차이를 찾는 방법은 무엇입니까? (0) | 2022.09.05 |
| MySQL 테이블에 삽입하거나 업데이트(있는 경우) (0) | 2022.09.05 |
| 두 날짜의 차이를 시간으로 반올림하는 방법 (0) | 2022.09.05 |