JavaScript로 CSS 값을 얻으십시오

199

다음 과 같은 JavaScript를 통해 CSS 값을 설정할 수 있다는 것을 알고 있습니다 .

document.getElementById('image_1').style.top = '100px';

그러나 현재 특정 스타일 값을 얻을 수 있습니까? 요소의 전체 스타일을 얻을 수있는 곳을 읽었지만 필요하지 않은 경우 전체 문자열을 구문 분석하지 않아도됩니다.

javascript  css 
— 마이클 폴
소스
어떤 '특정 스타일 가치'를 얻으려고합니까?
— BryanH 2016 년
현재 위치 값 : 높이, 너비, 상단, 여백 등
— Michael Paul
2
당신의 질문은 당신이 원하는 것이 var top = document.getElementById('image_1').style.top; 아니라면 그것을 바꾸고 싶어하는 5 월 같은 것을 원한다는 것을 빌려줍니다
— Marc
Thx All, 두 방법 모두 완벽하게 작동합니다. Jquery 메소드는 조금 더 컴팩트하므로 아마도 사용할 것입니다.
— Michael Paul

답변:

358

사용할 수 있습니다 getComputedStyle().

var element = document.getElementById('image_1'),
    style = window.getComputedStyle(element),
    top = style.getPropertyValue('top');

jsFiddle .

— 알렉스
소스
10
예를 들어 div의 배경색을 변경하려면 "backgroung-color"대신 "backgroundColor"를 사용하지 않도록주의하십시오.;)
— baptx
4
slw는 약어입니까 아니면 느리다는 의미입니까?
— David Winiecki
3
getComputedStyle은 IE 8 이하에서 지원되지 않습니다.
— David Winiecki
6
다소 벗어난 주제 : 일부 (모든?) 속기 CSS 속성 은 JavaScript에서 액세스 할 수 없습니다. 예를 들어 패딩은 왼쪽으로 채울 수 있지만 패딩은 할 수 없습니다. JSFiddle
— David Winiecki
4
@DavidWiniecki 나는 webdevs가 여전히 IE8을 주류 브라우저로 고려해야한다고 생각하지 않습니다. 그것을 고려하는 것은 Microsoft에서 더 이상 지원되지 않습니다
— 케빈 Kuyl
23

element.style 속성을 사용하면 해당 요소에 인라인으로 정의 된 (프로그래밍 방식으로 또는 요소의 스타일 속성에 정의 된) CSS 속성 만 알 수 있으며 계산 된 스타일을 가져와야합니다.

브라우저 간 방식으로 그렇게하기 쉽지는 않지만 IE는 element.currentStyle 속성을 통해 자체 방식을 가지고 있으며 다른 브라우저에서 구현되는 DOM Level 2 표준 방식은 document.defaultView.getComputedStyle 메소드를 통해 이루어집니다.

예를 들어, IE element.currentStyle 속성은 두 가지 방법으로 차이가 있으며, camelCase에서 두 개 이상의 단어로 구성된 CSS 속성 이름 (예 : maxHeight, fontSize, backgroundColor 등)에 액세스 할 것으로 예상합니다. 표준 방법은 대시로 구분 된 단어 (예 : 최대 높이, 글꼴 크기, 배경색 등) ......

function getStyle(el, styleProp) {
    var value, defaultView = (el.ownerDocument || document).defaultView;
    // W3C standard way:
    if (defaultView && defaultView.getComputedStyle) {
        // sanitize property name to css notation
        // (hyphen separated words eg. font-Size)
        styleProp = styleProp.replace(/([A-Z])/g, "-$1").toLowerCase();
        return defaultView.getComputedStyle(el, null).getPropertyValue(styleProp);
    } else if (el.currentStyle) { // IE
        // sanitize property name to camelCase
        styleProp = styleProp.replace(/\-(\w)/g, function(str, letter) {
            return letter.toUpperCase();
        });
        value = el.currentStyle[styleProp];
        // convert other units to pixels on IE
        if (/^\d+(em|pt|%|ex)?$/i.test(value)) { 
            return (function(value) {
                var oldLeft = el.style.left, oldRsLeft = el.runtimeStyle.left;
                el.runtimeStyle.left = el.currentStyle.left;
                el.style.left = value || 0;
                value = el.style.pixelLeft + "px";
                el.style.left = oldLeft;
                el.runtimeStyle.left = oldRsLeft;
                return value;
            })(value);
        }
        return value;
    }
}

주요 기준 스택 오버 플로우

— 아미르 모바 헤디
소스
16

DOM 조작없이 CSS 값을 확인하기위한 크로스 브라우저 솔루션 :

function get_style_rule_value(selector, style)
{
 for (var i = 0; i < document.styleSheets.length; i++)
 {
  var mysheet = document.styleSheets[i];
  var myrules = mysheet.cssRules ? mysheet.cssRules : mysheet.rules;

  for (var j = 0; j < myrules.length; j++)
  {
   if (myrules[j].selectorText && myrules[j].selectorText.toLowerCase() === selector)
   {
    return myrules[j].style[style];
   }
  }
 }
};

용법:

get_style_rule_value('.chart-color', 'backgroundColor')

위생 버전 (선택기 입력을 소문자로 강제하고 "."를 선행하지 않고 사용 사례를 허용 함)

function get_style_rule_value(selector, style)
{
 var selector_compare=selector.toLowerCase();
 var selector_compare2= selector_compare.substr(0,1)==='.' ?  selector_compare.substr(1) : '.'+selector_compare;

 for (var i = 0; i < document.styleSheets.length; i++)
 {
  var mysheet = document.styleSheets[i];
  var myrules = mysheet.cssRules ? mysheet.cssRules : mysheet.rules;

  for (var j = 0; j < myrules.length; j++)
  {
    if (myrules[j].selectorText)
    {
     var check = myrules[j].selectorText.toLowerCase();
     switch (check)
     {
      case selector_compare  :
      case selector_compare2 : return myrules[j].style[style];
     }
    }
   }
  }
 }
— 카 롤프
소스
나는 긴 하루를 보내고 있었고 여러 가지 이유로 작동하지 않았습니다. pastie.org/9754599 는 유효하지 않은 규칙 목록을 버리고 최종 ===의 양 측면을 줄임 으로써 훨씬 더 잘 작동합니다. 솔루션이 여전히 하루를 저장해 주셔서 감사합니다.
— Richard Fox
좋은 대답은 몇 가지 사례 사용 문제를 해결하기 위해 끝에 위생 버전을 추가했습니다.
— 동기화되지 않은
7

프로그래밍 방식으로 설정하면 변수처럼 호출 할 수 있습니다 (예 :) document.getElementById('image_1').style.top. 그렇지 않으면 항상 jQuery를 사용할 수 있습니다.

<html>
    <body>
        <div id="test" style="height: 100px;">Test</div>
        <script type="text/javascript" src="jquery.min.js"></script>
        <script type="text/javascript">
            alert($("#test").css("height"));
        </script>
    </body>
</html>
— adotout
소스
7
jQuery 예제가 매우 명확하거나 정확하지 않다고 생각합니다.
— alex
style 속성은 CSS 규칙에 의해 정의되지 않은 모든 스타일 인라인을 요소에 적용합니다.
— Steven Koch
2

라이브러리에 있다면 MyLibrary 및 getStyle을 사용해보십시오 .

jQuery CSS 메소드의 이름이 잘못되어 CSS는 스타일을 설정하는 한 가지 방법 일 뿐이며 요소의 스타일 속성의 실제 값을 반드시 나타내는 것은 아닙니다.

— RobG
소스
2

2020 년

사용하기 전에 확인

computedStyleMap ()을 사용할 수 있습니다

대답은 유효하지만 때로는 반환되는 단위를 확인해야 합니다. 문자열 slice()이나 substring()문자열 없이 얻을 수 있습니다 .

var element = document.querySelector('.js-header-rep');
element.computedStyleMap().get('padding-left');

var element = document.querySelector('.jsCSS');
var con = element.computedStyleMap().get('padding-left');
console.log(con);
.jsCSS {
  width: 10rem;
  height: 10rem;
  background-color: skyblue;
  padding-left: 10px;
}
<div class="jsCSS"></div>
스 니펫 확장

— 니 샤그 샤
소스
1

안전을 위해, 요소를 읽기 전에 요소가 존재하는지 점검 할 수 있습니다. 존재하지 않으면 코드에서 예외가 발생하여 나머지 JavaScript에서 실행이 중지되고 사용자에게 오류 메시지가 표시 될 수 있습니다. 당신은 정상적으로 실패 할 수 있기를 원합니다.

var height, width, top, margin, item;
item = document.getElementById( "image_1" );
if( item ) {
  height = item.style.height;
  width = item.style.width;
  top = item.style.top;
  margin = item.style.margin;
} else {
  // Fail gracefully here
}
— BryanH
소스
5
노드가 DOM에 없을 것으로 예상하지 않는 한 나쁜 생각입니다. 널 (null)이 예상되지 않을 때 블라인드 널 검사는 오류가없는 것처럼 보이지만 버그를 숨길 가능성이 높습니다. 노드가있을 것으로 예상되는 경우 노드가없는 것으로 코딩하지 말고 오류가 발생하여 코드를 수정하십시오. 이 답변은 질문 자체와는 아무런 관련이 없으며 (나쁜) 제안에 가깝기 때문에 주석이어야합니다.
— Juan Mendes
2
귀하의 의견에 감사드립니다. 나는 방어 적으로 발전하는 경향이 있기 때문에 그렇게합니다. 질문은 다음과 같습니다. 사용자 컴퓨터에서 오류가 어떻게 표시됩니까? 컴퓨터에서 작동하는 기능은 다른 브라우저 (OS 및 다른 브라우저, OS, 페이지 동작에 영향을 미치는 플러그인, 다양한 기타 기능 등)에서는 작동하지 않을 수 있습니다. 요점은 페이지가 정상적으로 실패하여 사용자에게 쓸모없는 오류를 표시하는 대신 의도 한 것과 비슷한 작업을 수행하는 것이 었습니다.
— BryanH
@BryanH ID가 "image_1"인 요소를 렌더링하지 않는 브라우저 버그가 있습니까? ;)
— alex
@alex 아니요. 해당 ID를 가진 요소가 없으면 OP 코드가 오류와 함께 실패합니다. 예 . 내 제안은 절대로 일어날 수 없도록 코딩하는 것이 었습니다.
— BryanH
0

위에 제공된 DOM 조작이없는 크로스 브라우저 솔루션은 마지막 규칙이 아니라 첫 번째 일치 규칙을 제공하므로 작동하지 않습니다. 마지막으로 일치하는 규칙이 적용됩니다. 작동하는 버전은 다음과 같습니다.

function getStyleRuleValue(style, selector) {
  let value = null;
  for (let i = 0; i < document.styleSheets.length; i++) {
    const mysheet = document.styleSheets[i];
    const myrules = mysheet.cssRules ? mysheet.cssRules : mysheet.rules;
    for (let j = 0; j < myrules.length; j++) {
      if (myrules[j].selectorText && 
          myrules[j].selectorText.toLowerCase() === selector) {
        value =  myrules[j].style[style];
      }
    }
  }
  return value;
}

그러나 복잡한 선택기의 경우이 간단한 검색이 작동하지 않습니다.

— jcdufourd
소스
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.