index 대신 document.styleSheets를 가져 오시겠습니까?

document.styleSheets은
색인과 함께 사용되지만 어떤 특정 CSS 파일에 stylesheet.insertRule을 사용하고 싶습니까?
index 대신 document.styleSheets를 가져 오시겠습니까?

페이지에 삽입되는 JS의 이름을 알고 있습니다.

출처

2009-11-05 vsync

나는이 questio을 요청, N하지만 이미 방법을 생각했습니다 그것을 해결하기 위해. 이 솔루션을 stackoverflow 커뮤니티와 공유하고 싶었습니다. – vsync

사용이, 그리고 명심 :

보안상의 이유로, 오페라와 모질라는 다른 도메인 또는 프로토콜에서 스타일의 cssRules 모음에 액세스 할 수 없습니다. 액세스하려고하는 보안 위반 오류를

setStyleRule = function(selector, rule) { 
    var stylesheet = document.styleSheets[(document.styleSheets.length - 1)]; 

    for(var i in document.styleSheets){ 
     if(document.styleSheets[i].href && document.styleSheets[i].href.indexOf("myStyle.css")) { 
      stylesheet = document.styleSheets[i]; 
      break; 
     } 
    } 

    if(stylesheet.addRule){ 
     stylesheet.addRule(selector, rule); 
    } else if(stylesheet.insertRule){ 
     stylesheet.insertRule(selector + ' { ' + rule + ' }', stylesheet.cssRules.length); 
    } 
}

출처

2009-11-05 10:17:30 vsync

첫 번째 메모 +1 +1 – cprcrack

+1 정확히 무엇이 필요합니까? – gumenimeda

@vsync, 보안상의 이유로 허용되지 않았습니다. 왜 이것이 보안 문제입니까? 정확히 어떻게 학대 당할 수 있습니까? – Pacerier

가 발생합니다이 때문에 CSS의 주소의 일이 페이지의 ADRESS의 다릅니다. 수정하려면 두 주소 모두에 주소가 있어야합니다.

출처

2011-05-31 13:20:06 Vitor

다음은 vsync의 대답에 대한 약간의 조정입니다. 당신은 document.getElementById를 통해 DOM 객체를 일단

function addRule(stylesheetId, selector, rule) { 
    var stylesheet = document.getElementById(stylesheetId); 

    if (stylesheet) { 
    stylesheet = stylesheet.sheet; 

    if (stylesheet.addRule) { 
     stylesheet.addRule(selector, rule); 
    } else if (stylesheet.insertRule) { 
     stylesheet.insertRule(selector + ' { ' + rule + ' }', stylesheet.cssRules.length); 
    } 
    } 
}

당신은 실제 스타일 시트를 액세스하기 위해 '시트'속성을 사용할 수 있습니다. 따라서 변경하려는 스타일 시트에 ID를 제공했는지 확인하십시오. 외부 CSS 파일 인 경우에도 ID를 제공하십시오.

그리고 여기 내 테스트 페이지 왜 이렇게 복잡

<!DOCTYPE html> 
<html> 
<head> 
    <title>Untitled Page</title> 
    <script type="text/javascript" src="jquery-1.7.1.js"></script> 
    <script> 
    var 
    index = 0, 
    items = [ 
     { selector: "h1", rules: "color:#3333BB;font: bold 18px Tahoma;padding: 12px 0 0 0;" }, 
     { selector: "p", rules: "padding:0;margin:0;background-color:#123456;color:#ABCDEF;"}, 
     { selector: "b", rules: "font-weight:normal;"}, 
     { selector: "i", rules: "color:#66FF66;" } 
    ]; 

    function addRule(stylesheetId, selector, rule) { 
     var stylesheet = document.getElementById(stylesheetId); 

     if (stylesheet) { 
     stylesheet = stylesheet.sheet; 

     if (stylesheet.addRule) { 
      stylesheet.addRule(selector, rule); 
     } else if (stylesheet.insertRule) { 
      stylesheet.insertRule(selector + ' { ' + rule + ' }', stylesheet.cssRules.length); 
     } 
     } 
    } 


    $(document).ready(function() { 
     $("button").click(function() { 
     addRule("myStyles", items[index].selector, items[index].rules); 
     index++; 
     }); 
    }); 


    </script> 
    <style id="myStyles"> 
    div 
    { 
     border: solid 1px black; 
     width: 300px; 
     height: 300px; 
    } 
    </style> 
</head> 
<body> 
    <button>Click Me</button> 
    <div> 
    <h1>test</h1> 
    <p>Paragraph One</p> 
    <p>Paragraph with <b>bold</b> and <i>Italics</i></p> 
    <p>Paragraph 3</p> 
    </div> 
</body> 
</html>

출처

2012-03-06 19:32:55 Intervalia

입니까? 당신은 문서에있는 모든 스타일 시트를 통해 반복없이 ID 또는 URL에 의해 특정 문서 스타일 시트를 얻을 수 있습니다 ... var mysheet = $('link#id')[0].sheet; ... 또는 var mysheet = $('link[href="/css/style.css"]')[0].sheet;

출처

2015-01-21 17:44:53 suncat100

완벽하게 작동합니다! 그러나 필요한 속성 이름이 "낱장"이라고 당신이 어떻게 알았는지 설명 할 수 있습니까? – Webars

내가 처음 본 것을 기억할 수는 없지만 '시트'는 기본적으로 프로그래밍 방식으로 스타일 시트에 액세스하는 데 사용되는 속성입니다. – suncat100

실제로 ".sheet"는 완벽하게 작동합니다! 불행히도,이 위대한 재산에 관한 정보는 거의 없습니다. 대부분의 사람들은 "document.styleSheets"를 반복합니다. – Marian07

index 대신 document.styleSheets를 가져 오시겠습니까?

답변

관련 문제