자바 스크립트로 CSS 값 변경

105

자바 스크립트로 인라인 CSS 값을 설정하는 것은 쉽습니다. 너비를 변경하고 다음과 같은 html이있는 경우 :

<div style="width: 10px"></div>

내가해야 할 일은 다음과 같습니다.

document.getElementById('id').style.width = value;

인라인 스타일 시트 값을 변경합니다. 인라인 스타일이 스타일 시트를 재정의하기 때문에 일반적으로 이것은 문제가되지 않습니다. 예:

<style>
   #tId {
      width: 50%;
   }
</style>

<div id="tId"></div>

이 자바 스크립트 사용 :

document.getElementById('tId').style.width = "30%";

다음을 얻습니다.

<style>
   #tId {
      width: 50%;
   }
</style>

<div id="tId" style="width: 30%";></div>

인라인 값을 변경하고 싶지 않을뿐만 아니라 너비를 설정하기 전에 검색하면 다음과 같은 경우 문제가됩니다.

<div id="tId"></div>

반환 된 값은 Null이므로 논리를 수행하기 위해 너비를 알아야하는 Javascript가있는 경우 (특정 값이 아니라 너비를 1 % 늘림) 문자열 "50 %"가 예상 될 때 Null이 반환됩니다. "실제로 작동하지 않습니다.

그래서 내 질문 : 인라인에 있지 않은 CSS 스타일의 값이 있습니다. 어떻게 이러한 값을 얻을 수 있습니까? ID가 주어지면 인라인 값 대신 스타일을 어떻게 수정할 수 있습니까?

javascript  html  css  ajax  dom 
— 콜틴
소스
게시물을 수정할 수 있습니까? 처음에는 불완전한 문장이 있습니다. 무엇을 찾고 있는지 확실하지 않습니다.
— Jason S
나는 당신이 요구하는 것에 대해 여전히 약간 혼란 스럽습니다. 1) 모든 요소를 ​​한 번에 변경하는 CSS 자체를 변경하도록 요청하고 있습니까? 또는 2) 한 번에 하나의 항목에 대한 CSS를 변경하려면?
— Mike
실제 질문에 대해서도 혼란 스럽습니다. 객체의 현재 스타일이 반드시 태그의 '스타일'속성과 같을 필요는 없습니다.
— MattJ
좀 더 명확하게 편집하겠습니다. 인라인 CSS를 설정하고 싶지 않습니다. 스타일의 폭을 늘리거나 줄일 수 있고 싶습니다. 내가 찾고있는 내용의 전체 예를 들어 편집하겠습니다.
— Coltin
— 닉 미첼

답변:

90

좋아, 한 번에 작은 스타일의 모든 요소를 ​​효율적으로 변경하도록 전역 CSS를 변경하려는 것 같습니다. 최근에 Shawn Olson 튜토리얼 에서 직접이 작업을 수행하는 방법을 배웠습니다 . 여기에서 그의 코드를 직접 참조 할 수 있습니다 .

요약은 다음과 같습니다.

를 통해 스타일 시트 를 검색 할 수 있습니다 document.styleSheets. 이것은 실제로 페이지에있는 모든 스타일 시트의 배열을 반환하지만 document.styleSheets[styleIndex].href속성 을 통해 어떤 스타일 시트에 있는지 알 수 있습니다 . 편집 할 스타일 시트를 찾으면 규칙 배열을 가져와야합니다. 이를 IE에서는 "규칙"이라고하고 다른 대부분의 브라우저에서는 "cssRules"라고합니다. CSSRule 이 무엇인지 알려주는 방법 은 selectorText속성에 의해 결정 됩니다. 작업 코드는 다음과 같습니다.

var cssRuleCode = document.all ? 'rules' : 'cssRules'; //account for IE and FF
var rule = document.styleSheets[styleIndex][cssRuleCode][ruleIndex];
var selector = rule.selectorText;  //maybe '#tId'
var value = rule.value;            //both selectorText and value are settable.

이것이 어떻게 작동하는지 알려주고 오류가 있으면 의견을 말하십시오.

— 마이크
소스
1
이 방법으로 CSS를 변경하는 것은 100 개 이상의 요소가있는 경우 훨씬 더 빠릅니다. 예를 들어 테이블의 특정 부분에있는 모든 셀을 한 번에 변경한다고 가정 해보십시오.
— EdH 2013
5
rule.valueFF 20 에서는 찾을 수 없습니다 . rule.style그러나 설정 가능하고 element.style. Cf. https://developer.mozilla.org/en-US/docs/DOM/CSSStyleRule . 에 rule.type == rule.STYLE_RULE액세스하기 전에 확인하는 것도 좋은 생각 일 수 rule.selectorText있습니다.
— Christian Aichinger
1
그것은 굉장했다! 저는 이미지 전환 작업을하고 있었는데, 슬라이스를 위해 36 개의 개별 URI에 큰 이미지를 넣으면 CSS 속도가 정말 느려집니다. 이것은 내 스크립트에서 엄청난 오버 헤드를 가져 왔습니다. 감사!
— Jason Maggard
1
2016 년에는 다음을 사용하십시오. developer.mozilla.org/en-US/docs/Web/API/CSS_Object_Model/…
— the_web
document.styleSheets[styleIndex].cssRules.[ruleIndex].style = {'color':'red', 'background-color':'green'};나를 위해 일했습니다, 감사합니다!
— Pavel
43

부디! w3 ( http://www.quirksmode.org/dom/w3c_css.html ) 에게 물어 보세요! 아니면 실제로 5 시간이 걸렸습니다 ...하지만 여기 있습니다!

function css(selector, property, value) {
    for (var i=0; i<document.styleSheets.length;i++) {//Loop through all styles
        //Try add rule
        try { document.styleSheets[i].insertRule(selector+ ' {'+property+':'+value+'}', document.styleSheets[i].cssRules.length);
        } catch(err) {try { document.styleSheets[i].addRule(selector, property+':'+value);} catch(err) {}}//IE
    }
}

이 기능은 정말 사용하기 쉽습니다 .. 예 :

<div id="box" class="boxes" onclick="css('#box', 'color', 'red')">Click Me!</div>
Or:
<div class="boxes" onmouseover="css('.boxes', 'color', 'green')">Mouseover Me!</div>
Or:
<div class="boxes" onclick="css('body', 'border', '1px solid #3cc')">Click Me!</div>

오..

편집 : @ user21820이 답변에 설명했듯이 페이지의 모든 스타일 시트를 변경하는 것이 약간 불필요 할 수 있습니다. 다음 스크립트는 IE5.5 및 최신 Google Chrome에서 작동하며 위에서 설명한 css () 함수 만 추가합니다.

(function (scope) {
    // Create a new stylesheet in the bottom
    // of <head>, where the css rules will go
    var style = document.createElement('style');
    document.head.appendChild(style);
    var stylesheet = style.sheet;
    scope.css = function (selector, property, value) {
        // Append the rule (Major browsers)
        try { stylesheet.insertRule(selector+' {'+property+':'+value+'}', stylesheet.cssRules.length);
        } catch(err) {try { stylesheet.addRule(selector, property+':'+value); // (pre IE9)
        } catch(err) {console.log("Couldn't add style");}} // (alien browsers)
    }
})(window);
— 레오나드 파울리
소스
매우 쉬운 구현. 감사합니다
— Kaleb Anderson
1
내 대답과 같이 새로 만든 단일 스타일 시트와 달리 모든 단일 스타일 시트를 수정하는 이유가 있습니까?
— user21820
아주 좋은 구현입니다. 존경합니다.
— 제이슨 Maggard
1
@ user21820, 아마 아닐 것입니다. 나는 정말 안전을 위해 원하는 것 같아요 .. :) 당신에게, 마지막으로 업데이트 명성을 답변
— 레너드 파울리
10

답변에서 코드를 수집하여 FF 25에서 잘 실행되는 것 같은이 함수를 작성했습니다.

function CCSStylesheetRuleStyle(stylesheet, selectorText, style, value){
  /* returns the value of the element style of the rule in the stylesheet
  *  If no value is given, reads the value
  *  If value is given, the value is changed and returned
  *  If '' (empty string) is given, erases the value.
  *  The browser will apply the default one
  *
  * string stylesheet: part of the .css name to be recognized, e.g. 'default'
  * string selectorText: css selector, e.g. '#myId', '.myClass', 'thead td'
  * string style: camelCase element style, e.g. 'fontSize'
  * string value optionnal : the new value
  */
  var CCSstyle = undefined, rules;
  for(var m in document.styleSheets){
    if(document.styleSheets[m].href.indexOf(stylesheet) != -1){
     rules = document.styleSheets[m][document.all ? 'rules' : 'cssRules'];
     for(var n in rules){
       if(rules[n].selectorText == selectorText){
         CCSstyle = rules[n].style;
         break;
       }
     }
     break;
    }
  }
  if(value == undefined)
    return CCSstyle[style]
  else
    return CCSstyle[style] = value
}

이것은 브라우저에서 이해하지 못하더라도 JS에서 사용될 CSS에 값을 넣는 방법입니다. 예를 들어 스크롤 테이블의 tbody에 대한 maxHeight.

전화 :

CCSStylesheetRuleStyle('default', "#mydiv", "height");

CCSStylesheetRuleStyle('default', "#mydiv", "color", "#EEE");

— FrViPofm
소스
1
스타일이 HTML 페이지에 포함 된 경우 document.styleSheets[m].hrefnull이되고 실패합니다.
— JCM
4

다른 솔루션이 문서의 전체 스타일 시트 목록을 통과하는 이유를 모르겠습니다. 이렇게하면 각 스타일 시트에 새 항목이 만들어 지므로 비효율적입니다. 대신 새 스타일 시트를 추가하고 원하는 CSS 규칙을 거기에 추가하기 만하면됩니다.

style=document.createElement('style');
document.head.appendChild(style);
stylesheet=style.sheet;
function css(selector,property,value)
{
    try{ stylesheet.insertRule(selector+' {'+property+':'+value+'}',stylesheet.cssRules.length); }
    catch(err){}
}

해당 속성에 대해 더 구체적인 "! important"스타일 선언이 이미 존재하지 않는 한 속성 값에 "! important"를 추가하여 요소에 직접 설정된 인라인 스타일도 재정의 할 수 있습니다.

— user21820
소스
1
더 복잡한 버전 은 developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet/… 를 참조하십시오 .
— user21820
1
매우 사실입니다. .insertRule이 실패하면 .addRule (selector, property + ':'+ value)을 사용해야합니다 (IE9 이전 지원의 경우).
— Leonard Pauli
3

댓글을 달 수있는 담당자가 없으므로 답변 형식을 지정하겠습니다.하지만 문제의 문제를 보여주는 것일뿐입니다.

스타일 시트에 요소 스타일이 정의되어 있으면 getElementById ( "someElement"). style에 표시되지 않는 것 같습니다.

이 코드는 문제를 설명합니다 . jsFiddle의 아래 코드입니다 .

테스트 2에서는 첫 번째 호출에서 남은 항목 값이 정의되지 않았으므로 간단한 토글이 엉망이됩니다. 내 사용을 위해 중요한 스타일 값을 인라인으로 정의 할 것이지만 스타일 시트의 목적을 부분적으로 위반하는 것 같습니다.

다음은 페이지 코드입니다 ...

<html>
  <head>
    <style type="text/css">
      #test2a{
        position: absolute;
        left: 0px;
        width: 50px;
        height: 50px;
        background-color: green;
        border: 4px solid black;
      }
      #test2b{
        position: absolute;
        left: 55px;
        width: 50px;
        height: 50px;
        background-color: yellow;
        margin: 4px;
      }
    </style>
  </head>
  <body>

  <!-- test1 -->
    Swap left positions function with styles defined inline.
    <a href="javascript:test1();">Test 1</a><br>
    <div class="container">
      <div id="test1a" style="position: absolute;left: 0px;width: 50px; height: 50px;background-color: green;border: 4px solid black;"></div>
      <div id="test1b" style="position: absolute;left: 55px;width: 50px; height: 50px;background-color: yellow;margin: 4px;"></div>
    </div>
    <script type="text/javascript">
     function test1(){
       var a = document.getElementById("test1a");
       var b = document.getElementById("test1b");
       alert(a.style.left + " - " + b.style.left);
       a.style.left = (a.style.left == "0px")? "55px" : "0px";
       b.style.left = (b.style.left == "0px")? "55px" : "0px";
     }
    </script>
  <!-- end test 1 -->

  <!-- test2 -->
    <div id="moveDownThePage" style="position: relative;top: 70px;">
    Identical function with styles defined in stylesheet.
    <a href="javascript:test2();">Test 2</a><br>
    <div class="container">
      <div id="test2a"></div>
      <div id="test2b"></div>
    </div>
    </div>
    <script type="text/javascript">
     function test2(){
       var a = document.getElementById("test2a");
       var b = document.getElementById("test2b");
       alert(a.style.left + " - " + b.style.left);
       a.style.left = (a.style.left == "0px")? "55px" : "0px";
       b.style.left = (b.style.left == "0px")? "55px" : "0px";
     }
    </script>
  <!-- end test 2 -->

  </body>
</html>

이것이 문제를 밝히는 데 도움이되기를 바랍니다.

건너 뛰기

— BentFX
소스
2

모든 요소의 "계산 된"스타일을 얻을 수 있습니다.

IE는 "currentStyle"이라는 것을 사용하고, Firefox (그리고 다른 "표준 호환"브라우저를 가정 함)는 "defaultView.getComputedStyle"을 사용합니다.

이를 위해서는 크로스 브라우저 함수를 작성하거나 prototype 또는 jQuery와 같은 훌륭한 자바 스크립트 프레임 워크를 사용해야합니다 (프로토 타입 자바 스크립트 파일에서 "getStyle"검색, jquery 자바 스크립트 파일에서 "curCss"검색).

즉, 높이 또는 너비가 필요한 경우 element.offsetHeight 및 element.offsetWidth를 사용해야합니다.

반환 된 값은 Null이므로 로직을 수행하기 위해 너비를 알아야하는 Javascript가있는 경우 (특정 값이 아닌 너비를 1 % 늘립니다)

문제의 요소에 인라인 스타일을 추가하면 "기본값"값으로 작동 할 수 있으며 요소의 인라인 스타일 속성이므로 페이지로드시 자바 스크립트에서 읽을 수 있습니다.

<div style="width:50%">....</div>
0

이 간단한 32 줄 요점을 통해 주어진 스타일 시트를 식별하고 스타일을 매우 쉽게 변경할 수 있습니다.

var styleSheet = StyleChanger("my_custom_identifier");
styleSheet.change("darkolivegreen", "blue");
— 솔렌 딜
소스
0

나는 이것의 실제 사용을 본 적이 없지만 아마도 DOM 스타일 시트를 고려해야 합니다 . 그러나 솔직히 그것은 과잉이라고 생각합니다.

당신은 단순히 상관없이 크기가 바로 사용에서 적용되는 곳으로, 요소의 폭과 높이를 얻고 싶은 경우에 element.offsetWidth와 element.offsetHeight.

— 라 케시 파이
소스
내 사용 : <style> #tid {너비 : 10 %; } </ style> <div id = 'tid'onclick = "increase ( 'tid')"> </ div> 증가는 너비가 <100 %인지 확인합니다. 그렇다면 너비는 1 % 증가합니다. document.getElementById.style.width는 인라인 값이 없기 때문에 null을 반환합니다. DOM 스타일 시트보다 더 간단한 방법이 있습니까?
— Coltin
0

아마도 이것을 시도해보십시오.

function CCSStylesheetRuleStyle(stylesheet, selectorText, style, value){
  var CCSstyle = undefined, rules;
  for(var m in document.styleSheets){
    if(document.styleSheets[m].href.indexOf(stylesheet) != -1){
     rules = document.styleSheets[m][document.all ? 'rules' : 'cssRules'];
     for(var n in rules){
       if(rules[n].selectorText == selectorText){
         CCSstyle = rules[n].style;
         break;
       }
     }
     break;
    }
  }
  if(value == undefined)
    return CCSstyle[style]
  else
    return CCSstyle[style] = value
}
— Shaq
소스
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.