2011-01-25 1 views
4

를 document.write로 적용되지 않고 있지만, 관련 사용자 정의 CSS가 적용되지 않습니다 :CSS는 텍스트에게 내가 Chrome 확장을 위해 document.write를을 사용하여 페이지에 텍스트를 쓰고 있어요

<!DOCTYPE html> 
<html> 
<head> 
    <title>TITLE GOES HERE</title> 
    <link rel="stylesheet" href="css/popup.css" type="text/css" /> 
</head> 

<body> 
    <script type="text/javascript"> 
     ... 
     function showFolder(folder) { 
      console.debug('FOLDER: '+folder.title); 
      document.write('<p>'+folder.title+'<br></p>'); 
     } 
    </script> 

</body> 
</html> 

CSS는 간단하다 단지 디버깅 :

p { 
color: red; 
} 

내가 함수 showFolder 내부 스타일 시트 링크를 넣어 경우 작동시킬 수 있지만 그것을 할 수있는 적절한 방법이 될 수 없습니다. 나는 jscript/CSS를 즉시 배우고 있기 때문에 답은 아마도 치료법 일 것이다. jscript, CSS 또는 둘 다에서 문제가 있습니까?

+1

어디에서'showFolder'를 부르시겠습니까? 스타일을 상충시키고 재정의 할 수있는 또 다른 스타일 시트가 있습니까? 나는 여기에있는 것을 테스트했고,'... '가있는 대신에 함수 선언 다음에'showFolder'를 호출하면 Chrome에서 잘 작동합니다. –

+0

showFolder는 다른 함수 (...) 내에서 호출되어 Chrome 북마크 내의 폴더 (기본적으로 '북마크 트리 읽기'-> '항목이 폴더 인 경우 showFolder를 통해 폴더 이름 표시). 킥을 위해서 ... function 앞에 showFolder 선언을 이동 시켰지만 문제는 남아 있습니다. – hideyho

답변

3

innerHTML을 사용하십시오.

<div id="towrite"></div> 

당신은 이런 식으로 쓸 수 있습니다

div=document.getElementById('towrite'); 
div.innerHTML = '<p>'+folder.title+'<br></p>'; 
+0

이제 가도록하겠습니다. 다시보고 할 것입니다. 감사! – hideyho

+0

document.createElement와 결합하여 (여러 div를 동적으로 생성해야했습니다.) 훌륭하게 작동했습니다. 다시 한번 감사드립니다. – hideyho

+0

이 답변에 누락 된 인용 부호가 있습니다. '

' – mrmike

0

은 내가 주로 .. jQuery를 사용하지만이 시도 ... 자바 스크립트없는 전문가는 아니지만, 가지 수 있습니다 의미 :

<!DOCTYPE html> 

TITLE이 여기

<script type="text/javascript"> 
    ... 
    function showFolder(folder) { 
     console.debug('FOLDER: '+folder.title); 
     document.write('<p>'+folder.title+'<br></p>'); 
    } 
</script> 

<link rel="stylesheet" href="css/popup.css" type="text/css" /> 

간다

편집 :

위의 내용은 작동하지 않지만 방금 다른 해결책을 생각했습니다. 실제로 함수를 언제 호출합니까? 그것을 넣으려고하십시오 <body onLoad="functionnamehere()">

그게 효과가 있지만 시도해보십시오.

+0

답장을 보내 주셔서 감사합니다. - 스타일 시트 링크를 머리 밖으로 옮기고 스크립트가 작동하지 않은 후에. – hideyho

+0

내 게시물을 다시 확인하십시오. – criticerz

+1

문제의 큰 부분은 document.write를 호출 할 때마다 LINK 태그를 포함하여 HEAD의 모든 내용이 지워졌습니다 (분명히 기본적으로 페이지가 재설정 됨). 위의 졸탄의 해결책은 올바른 길로 나를 잡았습니다. – hideyho

0

을 당신이 당신의 document.write를()를 실행하면 페이지가 아마도 페이지의 스크립트에서 직접 showFolder 호출을 호출 (로드 완료되기 전에), 텍스트는 예상대로 문서에 기록됩니다.

그러나 이벤트 핸들러처럼 페이지가로드 된 후에 document.write를 호출하면 완전히 새로운 페이지가 작성됩니다. 이것은 보통 당신이 원하는 것이 아닙니다.

대신 Zoltan의 조언에 따라 빈 div의 innerHTML 속성을 설정하십시오.

+1

감사합니다. 정말 '왜'가 아닌 '왜'인지 아는 것이 도움이됩니다. – hideyho