2016-08-30 6 views
1

나는 사용자의 선택에 따라 다른 CSS를 부여하는 기능에 document.write을 사용하고 있습니다.document.write에서 페이지를 새로 고치는 방법

function blue() { 
    document.write('<link rel="stylesheet" type="text/css" href="http://ilam.irib.ir/documents/697970/237563314/blue.css" />'); 
} 

저는 앵커 태그에서 함수를 호출하고 있습니다.

function color2(){ 
    document.getElementById("navigation").innerHTML +='<a class="myButton" onclick="blue()" background-color:"#05c8f2";></a>'; 
} 

짐작할 수 있듯이 링크를 클릭하면 페이지가 지워지고 빈 페이지가 나타납니다.

이 문제를 해결할 방법이 있습니까? 페이지 새로 고침을 중단하고 싶지 않습니다. 가능한 한 문제를 해결하려고합니다.

참고 : JavaScript를 사용하여 코드를 추가하는 이유와 HTML 코드에 직접 추가하지 않는 이유를 묻지 마십시오. 이 사이트는 대규모 시스템이며 JavaScript 및 CSS에 대한 액세스 권한 만 있습니다. 이것이 우리 페이지를 편집 할 수있는 전부입니다.

+1

*는 "이 문제를 해결하기 위해 어떤 방법이 있나요 헤드 태그 안에 링크 요소를 추가하면서 다시 작성? "* - document.write()를 사용하지 마십시오. DOM로드 후 부적절한 사용입니다. 그들은 이것을 할 수있는 다른 방법이 많이 있습니다. –

답변

2

document.write는 본문을 다시 씁니다. 결과적으로 문서의 유일한 부분은 추가 한 CSS 파일이므로 공백입니다. 위의 링크에서

View this

코드 : -

var cssId = 'myCss'; // you could encode the css path itself to generate id.. 
if (!document.getElementById(cssId)) 
{ 
    var head = document.getElementsByTagName('head')[0]; 
    var link = document.createElement('link'); 
    link.id = cssId; 
    link.rel = 'stylesheet'; 
    link.type = 'text/css'; 
    link.href = 'http://website.com/css/stylesheet.css'; 
    link.media = 'all'; 
    head.appendChild(link); 
} 

대신 DOM, 우리는

관련 문제