함수를 통해 클래스의 스타일 속성을 변경할 수 있습니까?

Question

첫째, 자바 스크립트를 통해 클래스를 참조하고 변경할 수 있습니까? 아니면 요소에 특정 ID가 있어야합니까?

텍스트 정보의 정적 div 옆에 쌓인 제출 가능한 양식이 있습니다. 제출이 완료되면 양식은 페이드되고 양식 대신 확인 메시지를 표시합니다. 그러나이 확인 메시지는 형식이 무엇인지에 대해 길고 (길이/높이로) 가깝기 때문에 정적 요소의 왼쪽 테두리는 다른 테두리와 겹칩니다.

내가하고 싶은 것은 페이드로 테두리를 제거하는 것입니다. JS에서는 올바른 클래스를 변수로 만든 다음 인라인으로 스타일을 지정하려고했습니다. 그러나 그것은 효과가없는 것 같습니다.

내가 잘못 언급 했습니까? (그것은 아래에 주석으로 처리됩니다)

나는 또 다른 해결 방법은 페이드 후 새로운 무언가로 그 클래스의 이름을 바꿀 수 있다고 생각하고 내 css에서 테두리없이 이전의 모든 것을 복사합니다. 그러나 이것은 상당히 단순한 무언가에 대해 상당히 사치스럽게 보입니다.

편집 : 난 아직도 정말 이해하고 있지 않다. 이 함수는 본질적으로 쿠키를 검사하기 때문에 (이전에 양식이 완료된 경우) 쿠키가 만들어지면 스타일이 바뀌겠습니까? 또한 스타일은 내 style.css 파일에서 참조해야하며 인라인 스타일은 필요하지 않습니다. 테스트를 위해서 두 가지 스타일을 모두 사라지게하지 않고 테두리를 다른 색상으로 변경하는 두 번째 스타일을 설정했습니다.

편집 2 : 내가 원하는 것은 아침에 업데이트됩니다.

HTML

<div class="contactusside"> 
<p>Some Text</p> 
</div> 

CSS

.contactusside{ 
    width: 230px; 
    float: right; 
    margin-left: 0px; 
    margin-right: -10px; 
    padding-right: 0px; 
    padding-left: 15px; 
border-left: 1px solid #eee; 
} 

.contactusside2{ 
    width: 230px; 
    float: right; 
    margin-left: 0px; 
    margin-right: -10px; 
    padding-right: 0px; 
    padding-left: 15px; 
border-left: 2px solid #FFF000; 
} 
.contactusside h2{ 
    border-bottom: 1px solid #777; 
    padding-bottom: 4px; 
} 

JS

$(function() { 
var completed = $.cookie('completed'), 
form = $('#contactform'), 
msg = $('#contactf'), 
sid = $('.contactusside'); 

if((completed != undefined) && (completed == 'done')) { 
form.hide(); 
msg.html('<h2 class="green">Success</h2>Thankyou for submitting the form. We will get back to you as soon as possible.'); 
sid.toggleClass('contactusside2'); 
} 
}); 

Answer 1

이미 jQuery를 사용하는 것처럼, 그쪽으로 기억 당신은 단지 이드가 아닌 다른 것들로 선택할 수 있습니다.

$('.class-name') //Selects all items with given class 
$('div') //Selects all divs (think of the whole world of CSS style selectors) 

난 당신에 대해 얘기하고 모든 항목이 주어진 클래스가, 또는 다른 방법으로 선택 될 수 있고, 경우에 당신이 일시적으로 수정하려는 경우, 당신은 전환하여이 작업을 수행 할 수 있다는 것을 권 해드립니다 그들에게 또 다른 수업이 있습니다 ... 당신이 대체 스타일을 원하는 기간의 시작과 끝에서.

$('div.some-class').toggleClass("some-class-alternate-style"); 

HTML :

<div class="some-class"> This is a box</div> 
<div class="some-class"> This is yet another box</div> 

내가 사업부가 여기에 사용하고 있지만, 그들이 어떤 요소 유형에 수업이 될 수 있습니다.

Answer 2

첫 번째로, 자바 스크립트를 통해 클래스를 참조하고 변경할 수 있습니까? 아니면 요소에 특정 ID가 있어야합니까?

정확히 무엇을 의미하는지 확실하지 않지만 몇 가지 방법이 있습니다. 가정 클래스 foo는,

1. 는

   var list; 
   list = document.getElementsByClassName('foo'); 
   // or 
   list = document.querySelectorAll('.foo'); // etc 
   

2. 이

   독립적 클래스와 일치하는 모든 노드에 새 스타일을 적용하여 클래스와 모든 노드의 NodeList를 받기

   // independentally for each node 
   var i; 
   for (i = 0; i < list.length; ++i) 
       list[i].style.bar = baz; 
   

3. 는

   // all nodes in one rule using a <style> 
   var style, sheet; 
   style = document.createElement('style'); // or some existing <style> 
   document.head.appendChild(style); // don't append if exists already 
   sheet = style.sheet; // access sheet from <style> 
   sheet.insertRule('.foo { bar: baz; }', Infinity); 
   // using index Infinity will always append as the last rule