JavaScript를 사용하여 CSS 값 가져오기
JavaScript를 통해 다음과 같은 CSS 값을 설정할 수 있습니다.
document.getElementById('image_1').style.top = '100px';
하지만 현재 특정 스타일 값을 받을 수 있나요?요소의 전체 스타일을 어디서 가져올 수 있는지 읽었지만, 필요하지 않으면 전체 문자열을 구문 분석할 필요가 없습니다.
를 사용할 수 있습니다.
var element = document.getElementById('image_1'),
style = window.getComputedStyle(element),
top = style.getPropertyValue('top');
console.log(top);<img id="image_1">element.style 속성을 사용하면 해당 요소에서 인라인으로 정의된 CSS 속성(프로그래밍 방식으로 또는 요소의 스타일 속성으로 정의된)만 알 수 있으므로 계산된 스타일을 얻을 수 있습니다.
크로스 브라우저 방식으로 실행하는 것은 쉽지 않습니다.IE는 element.currentStyle 속성을 통해 독자적인 방법을 가지고 있으며 다른 브라우저에 의해 구현되는 DOM 레벨2의 표준 방법은 document.defaultView.getComputedStyle 메서드를 통해 구현됩니다.
두 가지 방법에는 IE 요소 등의 차이가 있습니다.currentStyle 속성은 camelCase 내의 두 개 이상의 단어로 구성된 CSS 속성 이름(예를 들어 maxHeight, fontSize, backgroundColor 등)에 액세스하는 것으로 간주됩니다.표준적인 방법은 대시(예를 들어 max-height, font-size, background-color 등)로 구분된 단어로 속성을 예상합니다.......
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;
}
}
다음을 사용합니다.도움이 됐어요.
document.getElementById('image_1').offsetTop
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')
sanitized 버전(실렉터 입력을 소문자로 강제하여 "."로 시작하는 사용 사례를 허용합니다.)
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>
2021년에
사용 전 확인
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>안전상의 문제로 요소를 읽기 전에 요소가 존재하는지 확인하는 것이 좋습니다.존재하지 않는 경우 코드는 예외를 발생시켜 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
}
위에서 설명한 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;
}
그러나 이 단순 검색은 복잡한 셀렉터의 경우 작동하지 않습니다.
언급URL : https://stackoverflow.com/questions/6338217/get-a-css-value-with-javascript
'programing' 카테고리의 다른 글
| PHP "php://input" vs $_POST (0) | 2022.10.10 |
|---|---|
| mysql에 데이터가 없는 데이터베이스 구조 복사(빈 테이블 포함) (0) | 2022.10.10 |
| IntelliJ가 선언을 찾을 수 없습니다. (0) | 2022.10.10 |
| 매개 변수를 사용하여 메서드를 문서화하려면 어떻게 해야 합니까? (0) | 2022.10.10 |
| jQuery에서 div 요소 만들기 (0) | 2022.10.10 |