Javascript를 사용한 CSS 값 변경
javascript를 사용하면 인라인 CSS 값을 쉽게 설정할 수 있습니다.너비를 변경하고 싶을 때 다음과 같이 html을 사용하는 경우:
<div style="width: 10px"></div>
필요한 것은 다음과 같습니다.
document.getElementById('id').style.width = value;
인라인 스타일시트 값이 변경됩니다.인라인 스타일은 스타일시트를 덮어쓰기 때문에 일반적으로 이것은 문제가 되지 않습니다.예:
<style>
#tId {
width: 50%;
}
</style>
<div id="tId"></div>
이 Javascript 사용:
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가 지정된 인라인 값 대신 스타일을 수정하려면 어떻게 해야 합니까?
좋아요, 글로벌 CSS를 바꾸고 싶으신 것 같네요. 그래서 한번에 페티큘러 스타일의 모든 요소를 효과적으로 바꿀 수 있습니다.최근에 숀 올슨 튜토리얼에서 직접 이 방법을 배웠어요.여기서 직접 그의 코드를 참조할 수 있습니다.
요약은 다음과 같습니다.
다음 방법으로 스타일시트를 검색할 수 있습니다.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.
어떻게 동작하는지 알려주시고, 오류가 발견되면 코멘트 부탁드립니다.
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>
아..
편집: as @user21820 described in its answer, it might be a bit unnecessary to change all stylesheets on the page. The following script works with IE5.5 as well as latest Google Chrome, and adds only the above described css() function.
(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);
답을 모아 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");
왜 다른 솔루션이 문서의 스타일시트 목록 전체를 검토하는지 알 수 없습니다.이렇게 하면 각 스타일시트에 새 항목이 생성되므로 비효율적입니다.대신 새로운 스타일시트를 추가하여 원하는 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 스타일 선언이 존재하지 않는 한 이 값은 변경할 수 있습니다.
저는 코멘트가 부족하기 때문에 답변을 형식화하겠습니다만, 이것은 문제의 예에 지나지 않습니다.
요소 스타일이 스타일시트에 정의되면 getElementById("someElement") 스타일에는 표시되지 않습니다.
이 코드는 문제를 나타냅니다.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>
나는 이것이 그 문제를 밝히는 데 도움이 되기를 바란다.
건너뛰다.
모든 요소의 "계산된" 스타일을 얻을 수 있습니다.
IE는 "current Style"이라고 불리는 것을 사용하고 파이어폭스(및 다른 "표준" 준거 브라우저)는 "default View.getComputed Style"을 사용합니다.
이를 위해서는 크로스 브라우저 함수를 작성하거나 시제품이나 jQuery와 같은 좋은 Javascript 프레임워크를 사용해야 합니다(시제품 javascript 파일에서 "getStyle"을 검색하고 jquery javascript 파일에서 "curCss"를 검색).
즉, 높이 또는 폭이 필요한 경우 element.offset을 사용해야 합니다.높이 및 요소.offsetWidth.
반환되는 값은 Null이므로 로직을 수행하기 위해 폭을 알아야 하는 Javascript가 있는 경우(특정값이 아닌 1%까지 폭을 늘립니다)
문제의 요소에 인라인 스타일을 추가하면 "기본값"으로 작동할 수 있으며, 요소의 인라인 스타일 속성이기 때문에 페이지 로드 시 Javascript에서 읽을 수 있습니다.
<div style="width:50%">....</div>
이 간단한 32줄의 요약에서는 특정 스타일시트를 식별하고 스타일을 쉽게 변경할 수 있습니다.
var styleSheet = StyleChanger("my_custom_identifier");
styleSheet.change("darkolivegreen", "blue");
실용적으로 사용하는 것은 본 적이 없지만, DOM 스타일시트를 검토하는 것이 좋을 것 같습니다.하지만 난 솔직히 그건 과잉 살상이라고 생각해
단순히 요소의 너비와 높이를 얻으려면 치수가 적용되는 위치에 관계없이 다음을 사용하십시오.element.offsetWidth그리고.element.offsetHeight.
이것을 시험해 보세요.
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
}
언급URL : https://stackoverflow.com/questions/566203/changing-css-values-with-javascript
'code' 카테고리의 다른 글
| 각도 방향에서 부울 값을 바인딩하려면 어떻게 해야 합니까? (0) | 2023.02.16 |
|---|---|
| jq를 사용하여 요소 속성 값으로 개체 배열을 필터링하려면 어떻게 해야 합니까? (0) | 2023.02.16 |
| DESCRIBE 명령을 사용하지 않고 Oracle에서 테이블을 기술하려면 어떻게 해야 합니까? (0) | 2023.02.16 |
| 리액트 훅을 사용하여 다음 렌더링에 집중하는 방법 (0) | 2023.02.16 |
| JSON Schema - 다른 필드의 값을 기준으로 필드를 지정해야 합니다. (0) | 2023.02.16 |