iframe 내부에서 요소 스타일을 동적으로 변경합니다.

Question

iframe이 있고 그 배경색이 검정색으로, 몸체가 흰색으로 바뀌어야합니다. 그리고 외부 스타일 시트에서로드 된 디아 프트 (deafult)로 색상이 검정 인 모든 요소는 흰색으로 변경해야합니다. 나는 배경 색상 및 본문 텍스트의 색상을 변경 한 첫 번째 일은이다 :

frame = document.getElementsByTagName(“iframe”); 
    var D = frame.contentDocument; 
    var cwin = frame.contentWindow; 
    D.body.style.backgroundColor ='black'; 
    D.body.style.color = 'white'; 

그러나 색 검은 색을 가지고있는 요소 인해 스타일에 보이지 않는 될 것입니다. 그래서 나는 돔을 가로 지르며 색이 검은 색 요소를 가져 와서 흰색으로 바꾼다. 하지만 아래 코드는 제대로 작동하지 않습니다.

var all = D.getElementsByTagName("*"); 
       for (var i=0, max=all.length; i < max; i++) { 
        computedStyle = cwin.getComputedStyle(all[i]); 
        var c = computedStyle.getPropertyValue("color"); 
        if(c =='rgb(0,0,0)'){ 
         all[i].style.setProperty("color", "white", null); 
        } 
       } 

주 : 스타일 시트는 외부에서로드됩니다. 외부 스타일 시트를 수동으로 변경할 수 없습니다. 런타임에이 스타일 시트를 사용하고 싶습니다. 위의 코드에 대한 더 나은 솔루션이나 수정 사항은 무엇입니까?

Answer 1

c의 값이 "rgb (0, 0, 0)"인 경우 c == 'rgb(0,0,0)'은 false이됩니다. 테스트 된 문자열은 예상되는 문자열보다 2 문자 (공백) 길기 때문입니다.

줄을 if(c =='rgb(0, 0, 0)'){으로 변경할 수 있습니다.

그러나 브라우저마다 "검은 색"값이 다른 표현을 가질 수 있습니다. 검은 색 (# 000, rgb (0, 0, 0))의 표현을 항상 얻을 수 있도록하려면 here과 같이 고정 된 형식으로 문자열을 정규화 해보십시오.

또한 here (원본은 here)에서 활발하게 작동하는보다 포괄적 인 색상 변환기 (Stoyan 's RGBColor.js)가있는 것 같습니다.