알려진 클래스의 CSS 속성을 자바 스크립트

Question

으로 변경하십시오.이 경우는 다음과 같습니다.
특정 CSS 클래스가있는 HTML 요소가 있습니다. HTML 요소 자체를 변경하지 않고 해당 특정 클래스의 속성 값을 변경하고 싶습니다.

HTML 코드 :

<style> 
    .someClass{ 
     background-color:red; 
    } 

    span .someOtherClass { 
    background-color:blue; 
    } 
</style> 

<span class="someClass someOtherClass">some text</span> 

나는 ".someClass"식별자 "배경 색을 : 녹색"을해야합니다 있도록 할 것입니다 JS 코드를 찾고 있어요;

.css 옵션을 사용하지 않고 클래스 자체를 변경하려는 이유는 .css가 HTML 요소 (인라인)의 스타일 속성을 변경한다는 것입니다. 유스 케이스는 두 번째 클래스 (someOtherClass)가 span 요소와 동적으로 추가되거나 제거되는 곳입니다. ".someClass"클래스 요소를 변경하는 .CSS를 사용하여 reasulting 요소의 인라인 스타일을 변경합니다 :

<span class="someClass someOtherClass" style="background-color:green;">some text</span> 

이 추가 및 스팬 요소에서 "someOtherClass"를 제거하면 어떤 문제가 발생하지 않습니다 의미 감정.

span 요소에서 someClass를 제거하고 "background-color : green"이라는 새로운 동적 생성 클래스로 대체하는 방법에 대해 생각해 보았습니다. 그러나 좀 더 우아한 것이 있는지 궁금합니다.

도움이 될 것입니다.

Answer 1

var someClass = document.getElementsByClassName('someClass')[0]; 
 
someClass.classList.add('green'); 
 
someClass.classList.remove('someClass'); // optional

.someClass { 
 
    color: red; 
 
} 
 
.green { 
 
    color: green; 
 
}

<span class="someClass">someclass</span>

, 당신은 (실제로 어디 스타일 시트 또는) 스타일 시트의 마지막에 규칙을 추가 insertRule()를 사용할 수 있습니다.

background-color: green에

background-color: red

에서 .someClass의 선언을 다시 작성,이 경우 -

이 하나 또는 여러 또는 특정 클래스와 관련된 선언을 모두 변경할 수있게된다.

작업 예 :

var span = document.getElementsByTagName('span')[0]; 
 
var toggleSomeOtherClass = document.getElementsByClassName('toggle-some-other-class')[0]; 
 
var changeSomeClass = document.getElementsByClassName('change-some-class')[0]; 
 
var backgroundColor = 'red'; 
 

 
function toggleClass() { 
 
\t span.classList.toggle('someOtherClass'); 
 
} 
 

 
function changeClass() { 
 
\t backgroundColor = (backgroundColor === 'red' ? 'green' : 'red'); 
 
\t document.styleSheets[0].insertRule('.someClass {background-color: ' + backgroundColor + ';}', document.styleSheets[0].cssRules.length); 
 
\t document.styleSheets[0].insertRule('.someOtherClass {background-color: blue;}', document.styleSheets[0].cssRules.length); 
 
} 
 

 
toggleSomeOtherClass.addEventListener('click', toggleClass, false); 
 
changeSomeClass.addEventListener('click', changeClass, false);

span { 
 
display: inline-block; 
 
width: 120px; 
 
height: 60px; 
 
line-height: 60px; 
 
color: rgb(255,255,255); 
 
font-weight: bold; 
 
text-align: center; 
 
} 
 

 
.someClass { 
 
background-color: red; 
 
} 
 

 
.someOtherClass { 
 
background-color: blue; 
 
}

<span class="someClass someOtherClass">some text</span> 
 

 
<button class="toggle-some-other-class" type="button">Toggle someOtherClass</button> 
 
<button class="change-some-class" type="button">Change someClass</button>

Answer 2

녹색을 나타내는 새 클래스를 추가하고 CSS 규칙을 추가하면됩니다. 그런 다음 사용 방법에 따라 원본 .someClass을 제거 할 수 있습니다. 원본 클래스의 color 특성을 계층 적으로 또는보다 높은 특이성으로 덮어 쓴다면 제거 할 때 원본 클래스보다 새로운 클래스가 우선합니다. 자바 스크립트에서