다음 과 같은 JavaScript를 통해 CSS 값을 설정할 수 있다는 것을 알고 있습니다 .
document.getElementById('image_1').style.top = '100px';그러나 현재 특정 스타일 값을 얻을 수 있습니까? 요소의 전체 스타일을 얻을 수있는 곳을 읽었지만 필요하지 않은 경우 전체 문자열을 구문 분석하지 않아도됩니다.
답변
사용할 수 있습니다 getComputedStyle().
var element = document.getElementById('image_1'),
style = window.getComputedStyle(element),
top = style.getPropertyValue('top');jsFiddle .
답변
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;
}
}답변
답변
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];
}
}
}
}
}답변
프로그래밍 방식으로 설정하면 변수처럼 호출 할 수 있습니다 (예 🙂 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>답변
라이브러리에 있다면 MyLibrary 및 getStyle을 사용해보십시오 .
jQuery CSS 메소드의 이름이 잘못되어 CSS는 스타일을 설정하는 한 가지 방법 일 뿐이며 요소의 스타일 속성의 실제 값을 반드시 나타내는 것은 아닙니다.
답변
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>