자바 스크립트에서 CSS의 CSS를 변경 하시겠습니까?

Question

none으로 설정된 디스플레이가있는 클래스가 있습니다. 자바 스크립트에서 지금 inline으로 설정하고 싶습니다. getElementById 인 ID로이 작업을 수행 할 수 있다는 것을 알고 있지만 클래스를 사용하여 가장 명확한 방법은 무엇입니까? ? 그것을 할 수

Answer 1

당신은   — 실제로 styleSheets 배열 (MDC link, MSDN link)를 사용하여 클래스   — 관련 스타일 규칙을 변경하는 것이 수행하지만, 솔직히 당신이 있어 수 아마도 display: none을 정의하는 별도의 스타일을 가지고 더 이상 숨길 필요가 없을 때 요소에서 해당 스타일을 제거하는 것이 더 바람직 할 것입니다.

Answer 2

가장 좋은 방법과 같이, 숨겨진 클래스를 가지고있다 :

.hidden { display: none; } 

는 그 후, 자바 스크립트의 모든 요소에 className 속성이 있습니다. 해당 문자열을 조작하여 hidden 클래스의 발생을 제거하고 다른 것을 추가 할 수 있습니다.

조언이 하나 있습니다. jQuery를 사용하십시오. 그런 종류의 물건을 다루기가 더 쉬워지면 다음과 같이 할 수 있습니다.

$('#element_id').removeClass('hidden').addClass('something'); 

Answer 3

이런 뜻입니까?

var elements = document.getElementsByClassName('hidden-class'); 
for (var i in elements) { 
    if (elements.hasOwnProperty(i)) { 
    elements[i].className = 'show-class'; 
    } 
} 

그런 다음 CSS

.hidden-class { display: none; } 
.show-class { display: inline; } 

Answer 4

getElementsByClassName을 사용하면 요소 배열을 얻을 수 있습니다. 그러나 이것은 구형 브라우저에서는 구현되지 않습니다. 이 경우 getElementsByClassName은 undefined이므로 the code has to iterate through elements and check which ones have the desired class name입니다.

$('.theClassName').css('display', 'inline') 

Answer 5

당신이 만들 수 있습니다

이를 위해 당신은 등

jQuery를에

가이 같은 한 - 라이너와 함께 할 수있는 jQuery를, Mootools의 프로토 타입과 같은 자바 스크립트 프레임 워크를 사용한다 새로운 스타일 규칙.

var cssStyle = document.createElement('style'); 
cssStyle.type = 'text/css'; 
var rules = document.createTextNode(".YOU_CLASS_NAME{display:hidden}"); 
cssStyle.appendChild(rules); 
document.getElementsByTagName("head")[0].appendChild(cssStyle); 

$("#YOUR_DOM_ID").addClass("YOUR_CLASS_NAME"); 

Answer 6

당신은/악용이 기능을 다시 작성하실 수 있습니다 :

function getStyleRule(ruleClass, property, cssFile) { 
    for (var s = 0; s < document.styleSheets.length; s++) { 
     var sheet = document.styleSheets[s]; 
     if (sheet.href.endsWith(cssFile)) { 
      var rules = sheet.cssRules ? sheet.cssRules : sheet.rules; 
      if (rules == null) return null; 
      for (var i = 0; i < rules.length; i++) { 
       if (rules[i].selectorText == ruleClass) { 
        return rules[i].style[property]; 
        //or rules[i].style["border"]="2px solid red"; 
        //or rules[i].style["boxShadow"]="4px 4px 4px -2px rgba(0,0,0,0.5)"; 
       } 
      } 
     } 
    } 
    return null; 
} 

• 는 "모든 스타일 시트를 부착 패스를 스캔을 index.css"
• "그렇지 않으면 뭔가 같은 세 번째 인수로" ruleClass에 시작 '.'이 (가) 있습니다.
• (규칙 [I] .selectorText & & 규칙 [I] .selectorText.split (''). 같이 IndexOf (속성)! == -1) 조건 개선 여기서 https://stackoverflow.com/a/16966533/881375 찾으면
• 을 잊지 말고
CSS 속성을 통해 자바 스크립트 문법을 사용하십시오. 상자 - 그림자 vs.페이지 흐름을 망칠 수 있습니다 다시 볼 일을하기 위해 "인라인 표시"를 사용하여 O를

이 비록

Answer 7

긴, ​​여기에 몇 가지 발언을 사라 boxShadow. 일부 요소는 인라인으로 표시되고 다른 요소는 블록으로 표시됩니다. 따라서 .hidden 스타일 만 정의하고 제거하면 다시 볼 수 있습니다.

o 숨기기 방법 : 요소를 숨기는 두 가지 방법이 있습니다. 하나는 위에서 언급 한 "display : none"이며 기본적으로 요소가없는 것처럼 동작하게하고, "visibility : hidden 요소를 보이지 않게 렌더링하지만 그것이 차지하는 공간을 유지합니다. 숨기려는 항목에 따라 요소를 표시하거나 숨길 때 다른 요소가 이동하지 않으므로 표시 여부가 더 나은 선택 일 수 있습니다.

o 클래스 추가/제거 vs. CSS 규칙 조작 : 결과가 매우 다릅니다. CSS 규칙을 조작하면 특정 CSS 클래스가있는 모든 요소가 영향을받습니다. 현재와 미래에는 DOM에 동적으로 추가 된 새로운 요소도 숨겨집니다. 반면에 클래스를 추가/제거 할 때 새로이 추가 된 요소에는 클래스가 추가/제거되었습니다. 그래서 CSS를 조작하면 동적으로 생성 된 DOM 요소에 더 나은 선택이 될 수 있지만 정적 HTML에서는 클래스 추가/제거가 잘 작동한다고 말하고 싶습니다.