1
我有一個網頁，其中我使用JavaScript/CSS來設計頁面樣式。 我想鏈接我與document.write的樣式表，但我無法這樣做。如何添加鏈接樣式表到document.write
我在style.css中有相同的代碼，但樣式不加載。
要設置頁面的樣式我已經在getRadioButtonValue()添加了CSS，但是我想從樣式表本身加載它。
注意：要加載頁面，請單擊是（所有5個問題），然後單擊獲取結果以查看我想要設計的頁面。我隱藏div直到yes或no被點擊。
* {
box-sizing: border-box;
background-color: #bf2e1a;
}
header {
color: #EFDFBC;
border-style: solid;
border-color: #EFDFBC;
top: 100px;
margin-left: 650px;
margin-right: 650px;
margin-top: 150px;
text-align: center;
font-size: 60px;
border-width: 5px;
}
div#main-content {
margin-top: 100px;
}
div#disclaimer {
width: 800px;
height: 100px;
height: 500px;
margin: 0 auto;
margin-top: 200px;
background: #EFDFBC;
}
div#get-justice {
position: relative;
top: 30px;
padding-top: 10px;
background-color: #EFDFBC;
margin: 0 auto;
width: 600px;
height: 600px;
}
div#get-justice p {
background-color: #EFDFBC;
color: red;
padding: 40px 40px 4px 40px;
font-size: 28px;
}
div#get-justice button {
background-color: red;
border: none;
color: white;
margin-top: 120px;
padding: 20px 37px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 21px;
cursor: pointer;
}
h3 {
background: #EFDFBC;
text-align: center;
color: red;
font-size: 23px;
padding-top: 25px;
}
div#first-question {
text-align: center;
}
ul {
columns: 2;
background: #EFDFBC;
\t text-align: -webkit-left;
}
li {
text-align: -webkit-match-parent;
background: #EFDFBC;
display: block;
padding: 1px 0px 3px 37px;
}
input#quiz-question-one-yes {
display: none;
margin: 11px;
}
input#quiz-question-one-no {
display: none;
margin: 11px;
}
label#oneYes {
display: inline-block;
margin: 10px;
padding: 10px 30px;
background-color: red;
border-color: #ddd;
font-size: 33px;
text-align: center;
}
label#oneNo {
display: inline-block;
margin: 10px;
padding: 10px 30px;
background-color: red;
border-color: #ddd;
font-size: 33px;
text-align: center;
}
input#quiz-question-two-yes {
display: none;
margin: 11px;
}
input#quiz-question-two-no {
display: none;
margin: 11px;
}
label#twoYes {
display: inline-block;
margin: 10px 208px;
padding: 10px 30px;
background-color: red;
border-color: #ddd;
font-size: 33px;
text-align: center;
}
label#twoNo {
display: inline-block;
margin: 0px 0 0 -197px;
padding: 10px 30px;
background-color: red;
border-color: #ddd;
font-size: 33px;
text-align: center;
}
input#quiz-question-three-yes {
display: none;
margin: 11px;
}
input#quiz-question-three-no {
display: none;
margin: 11px;
}
label#threeYes {
display: inline-block;
margin: 10px 208px;
padding: 10px 30px;
background-color: red;
border-color: #ddd;
font-size: 33px;
text-align: center;
}
label#threeNo {
display: inline-block;
margin: 0px 0 0 -197px;
padding: 10px 30px;
background-color: red;
border-color: #ddd;
font-size: 33px;
text-align: center;
}
/*label#threeYes {
display: inherit;
margin: 13px 360px 0px 195px;
padding: 8px 73px 8px 22px;
background-color: red;
border-color: #ddd;
font-size: 33px;
text-align: center;
}
label#threeNo {
display: inherit;
margin: -54px 296px 0px 300px;
padding: 12px 66px 5px 18px;
background-color: red;
border-color: #ddd;
font-size: 33px;
text-align: center;
}*/
input#quiz-question-four-yes {
display: none;
margin: 11px;
}
input#quiz-question-four-no {
display: none;
margin: 11px;
}
label#fourYes {
display: inline-block;
margin: 10px 208px;
padding: 10px 30px;
background-color: red;
border-color: #ddd;
font-size: 33px;
text-align: center;
}
label#fourNo {
display: inline-block;
margin: 0px 0 0 -197px;
padding: 10px 30px;
background-color: red;
border-color: #ddd;
font-size: 33px;
text-align: center;
}
/*
label#fourYes {
display: inherit;
margin: 13px 360px 0px 195px;
padding: 8px 73px 8px 22px;
background-color: red;
border-color: #ddd;
font-size: 33px;
text-align: center;
}
label#fourNo {
display: inherit;
margin: -54px 296px 0px 300px;
padding: 12px 66px 5px 18px;
background-color: red;
border-color: #ddd;
font-size: 33px;
text-align: center;
}*/
input#quiz-question-five-yes {
display: none;
margin: 11px;
}
input#quiz-question-five-no {
display: none;
margin: 11px;
}
label#fiveYes {
display: inline-block;
margin: 10px 208px;
padding: 10px 30px;
background-color: red;
border-color: #ddd;
font-size: 33px;
text-align: center;
}
label#fiveNo {
display: inline-block;
margin: 0px 0 0 -197px;
padding: 10px 30px;
background-color: red;
border-color: #ddd;
font-size: 33px;
text-align: center;
}
/*
label#fiveYes {
display: inherit;
margin: 13px 360px 0px 195px;
padding: 8px 73px 8px 22px;
background-color: red;
border-color: #ddd;
font-size: 33px;
text-align: center;
}
label#fiveNo {
display: inherit;
margin: -54px 296px 0px 300px;
padding: 12px 66px 5px 18px;
background-color: red;
border-color: #ddd;
font-size: 33px;
text-align: center;
}*/
.clientinfo{
\t height:445px;
background-color: #EFDFBC;
}
p {
background-color: #EFDFBC;
font-size: 23px;
margin: 0 auto;
padding: 10px 0px 1px 70px;
}
input[type="text"] {
background-color: white;
padding: 4px 0px 0px 10px;
margin: 0px 0px 0px 70px;
}
button {
display: block;
margin: 0 auto;
padding: 25px 35px 20px 25px;
font-size: 35px;
margin-top: 45px;
color: #EFDFBC;
}
button#start {
display: block;
margin: 0 auto;
width: 200px;
padding: 25px 35px 20px 25px;
font-size: 35px;
margin-top: -272px;
margin-right: 68px;
}
hr {
width: 165px;
padding: 1px 0px 0px 0px;
}
div#disclaimer {
width: 800px;
padding: 27px 10px 10px 0px;
}
h1 {
//background: #EFDFBC;
padding: 20px 4px 20px;
text-align: center;
}
h1#disclaimerHeader{
\t background: #EFDFBC;
padding: 20px 4px 20px;
text-align: center;
}
p {
background-color: #EFDFBC;
font-size: 23px;
margin: 0 auto;
padding: 1px 0px 0px 20px;
}
div#disc-container {
width: 450px;
background: #EFDFBC;
padding: 10px 10px 14px 10px;
border-style: solid;
border-color: red;
border-width: 10px;
margin-left: 20px;
}
a#disclaimerLink {
text-decoration: none;
}
/*.hideHeader{
\t display:none;
}*/
p#greenText {
background: #EFDFBC;
display: block;
width: 800px;
margin: 0 auto;
margin-top: 300px;
font-size: 30px;
color: green;
text-align: -webkit-auto;
padding: 50px 50px 50px 50px;
}
.bkr-header{
color: #EFDFBC;
border-style: solid;
border-color: #EFDFBC;
top: 153px;
padding-bottom: 30px;
padding-top: 30px;
/* margin-top: 163px; */
margin: 0 auto;
width: 600px;
text-align: center;
font-size: 60px;
border-width: 10px;
}
.hidden {
display: none;
}
.visible {
display: block;
margin: 0 auto;
width: 650px;
height: 445px;
background: #EFDFBC;
}
.visible2 {
display: block;
margin: 0 auto;
width: 650px;
height: 165px;
background: #EFDFBC;
}
.visible4 {
display: block;
margin: 0 auto;
width: 650px;
height: 195px;
background: #EFDFBC;
}
.visibleHeader {
color: #EFDFBC;
border-style: solid;
border-color: #EFDFBC;
top: 153px;
padding-bottom: 30px;
padding-top: 30px;
/* margin-top: 163px; */
margin: 0 auto;
width: 650px;
text-align: center;
font-size: 60px;
border-width: 10px;
}
.questions {
margin: 0px auto;
width: 650px;
height: 444px;
background: #EFDFBC;
}
.questions-header {
color: #EFDFBC;
border-style: solid;
border-color: #EFDFBC;
top: 153px;
padding-bottom: 30px;
padding-top: 30px;
/* margin-top: 163px; */
margin: 0 auto;
width: 650px;
text-align: center;
font-size: 60px;
border-width: 10px;
}
.quiz-questions {
margin-top: 100px;
}<!DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8"/>
<title>Questions</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class = "quiz-questions">
<h1 class = "questions-header" id ="firstHeader"> Question 1 </h1>
<div id="first-question" class="visible">
<h3>can you see the following options a,b,c?</h3>
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
<hr>
<input type="radio" id="quiz-question-one-yes" value="yes" />
<label for="quiz-question-one-yes" id="oneYes">Yes</label>
<input type="radio" id="quiz-question-one-no" value="no" />
<label for="quiz-question-one-no" id="oneNo">No</label>
</div>
<h1 class = "questions-header" id="secondHeader"> Question 2 </h1>
<div id="second-question" class="hidden">
<h3>Test 2?</h3>
<hr>
<input type="radio" id="quiz-question-two-yes" value="yes" />
<label for="quiz-question-two-yes" id="twoYes">Yes</label>
<input type="radio" id="quiz-question-two-no" value="no" />
<label for="quiz-question-two-yes" id="twoNo">No</label>
</div>
<h1 class = "questions-header" id="thirdHeader"> Question 3 </h1>
<div id="third-question" class="hidden">
<h3>Test 3 </h3>
<hr>
<input type="radio" id="quiz-question-three-yes" value="yes" />
<label for="quiz-question-three-yes" id="threeYes">Yes</label>
<input type="radio" id="quiz-question-three-no" value="no" />
<label for="quiz-question-three-yes" id="threeNo">No</label>
</div>
<h1 class = "questions-header" id="fourthHeader"> Question 4 </h1>
<div id="fourth-question" class="hidden">
<h3>Test 4</h3>
<hr>
<input type="radio" id="quiz-question-four-yes" value="yes" />
<label for="quiz-question-four-yes" id="fourYes">Yes</label>
<input type="radio" id="quiz-question-four-no" value="no" />
<label for="quiz-question-four-yes" id="fourNo">No</label>
</div>
<h1 class = "questions-header" id="fifthHeader"> Question 5 </h1>
<div id="fifth-question" class="hidden">
<h3>Test 5</h3>
<hr>
<input type="radio" id="quiz-question-five-yes" value="yes" />
<label for="quiz-question-five-yes" id="fiveYes">Yes</label>
<input type="radio" id="quiz-question-five-no" value="no" />
<label for="quiz-question-five-yes" id="fiveNo">No</label> </div>
<h1 class = "questions-header" id="sixthHeader"> Almost There </h1> \t
<div id = "client-form" class ="hidden">
<div id ="get-client-info" class="clientinfo">
<h3>Get results</h3>
<p>Name: </p>
<input type="text"></input>
<button type="submit" onclick="getRadioButtonValue()">Get Results</button>
</div>
</div>
</div>
</body>
<script type="text/javascript">
<!-- Function to hide the div tags -->
var questionOneDiv = document.getElementById("first-question");
var questionTwoDiv = document.getElementById("second-question");
var questionThreeDiv = document.getElementById("third-question");
var questionFourDiv = document.getElementById("fourth-question");
var questionFiveDiv = document.getElementById("fifth-question");
var clientForm = document.getElementById("client-form");
var headerOne = document.getElementById("firstHeader");
var headerTwo = document.getElementById("secondHeader");
var headerThree = document.getElementById("thirdHeader");
var headerFour = document.getElementById("fourthHeader");
var headerFive = document.getElementById("fifthHeader");
var headerSix = document.getElementById("sixthHeader");
var radioOneYes = document.getElementById("quiz-question-one-yes");
var radioOneNo = document.getElementById("quiz-question-one-no");
var radioTwoYes = document.getElementById("quiz-question-two-yes");
var radioTwoNo = document.getElementById("quiz-question-two-no");
var radioThreeYes = document.getElementById("quiz-question-three-yes");
var radioThreeNo = document.getElementById("quiz-question-three-no");
var radioFourYes = document.getElementById("quiz-question-four-yes");
var radioFourNo = document.getElementById("quiz-question-four-no");
var radioFiveYes = document.getElementById("quiz-question-five-yes");
var radioFiveNo = document.getElementById("quiz-question-five-no");
headerTwo.setAttribute('class','hidden');
headerThree.setAttribute('class','hidden');
headerFour.setAttribute('class','hidden');
headerFive.setAttribute('class','hidden');
headerSix.setAttribute('class','hidden');
radioOneYes.onclick = function() { \t
\t questionOneDiv.setAttribute('class', 'hidden');
\t questionTwoDiv.setAttribute('class', 'visible2');
\t questionThreeDiv.setAttribute('class', 'hidden');
\t questionFourDiv.setAttribute('class', 'hidden'); \t
\t questionFiveDiv.setAttribute('class', 'hidden');
\t clientForm.setAttribute('class', 'hidden'); \t \t
\t headerOne.setAttribute('class','hidden');
\t headerTwo.setAttribute('class','visibleHeader');
};
radioOneNo.onclick = function() {
\t questionOneDiv.setAttribute('class', 'hidden');
\t questionTwoDiv.setAttribute('class', 'visible2');
\t questionThreeDiv.setAttribute('class', 'hidden');
\t questionFourDiv.setAttribute('class', 'hidden'); \t
\t questionFiveDiv.setAttribute('class', 'hidden');
\t clientForm.setAttribute('class', 'hidden'); \t \t \t
\t headerOne.setAttribute('class','hidden');
\t headerTwo.setAttribute('class','visibleHeader');
};
radioTwoYes.onclick = function() {
\t questionOneDiv.setAttribute('class', 'hidden');
\t questionTwoDiv.setAttribute('class', 'hidden');
\t questionThreeDiv.setAttribute('class', 'visible2');
\t questionTwoDiv.setAttribute('class', 'hidden'); \t
\t questionFiveDiv.setAttribute('class', 'hidden'); \t \t
\t clientForm.setAttribute('class', 'hidden'); \t \t
\t headerTwo.setAttribute('class','hidden');
\t headerThree.setAttribute('class','visibleHeader'); \t \t
};
radioTwoNo.onclick = function() {
\t questionOneDiv.setAttribute('class', 'hidden');
\t questionTwoDiv.setAttribute('class', 'hidden');
\t questionThreeDiv.setAttribute('class', 'visible2');
\t questionFourDiv.setAttribute('class', 'hidden'); \t
\t questionFiveDiv.setAttribute('class', 'hidden');
\t clientForm.setAttribute('class', 'hidden'); \t
\t headerTwo.setAttribute('class','hidden'); \t \t
\t headerThree.setAttribute('class','visibleHeader'); \t \t
};
radioThreeYes.onclick = function() {
\t questionOneDiv.setAttribute('class', 'hidden');
\t questionTwoDiv.setAttribute('class', 'hidden');
\t questionThreeDiv.setAttribute('class', 'hidden');
\t questionFourDiv.setAttribute('class', 'visible4'); \t
\t questionFiveDiv.setAttribute('class', 'hidden');
\t clientForm.setAttribute('class', 'hidden'); \t
\t headerThree.setAttribute('class','hidden'); \t \t
\t headerFour.setAttribute('class','visibleHeader'); \t \t \t
};
radioThreeNo.onclick = function() {
\t questionOneDiv.setAttribute('class', 'hidden');
\t questionTwoDiv.setAttribute('class', 'hidden');
\t questionThreeDiv.setAttribute('class', 'hidden');
\t questionFourDiv.setAttribute('class', 'visible4'); \t
\t questionFiveDiv.setAttribute('class', 'hidden');
\t clientForm.setAttribute('class', 'hidden'); \t
\t headerThree.setAttribute('class','hidden'); \t \t
\t headerFour.setAttribute('class','visibleHeader'); \t \t \t
}; \t
\t
radioFourYes.onclick = function() {
\t questionOneDiv.setAttribute('class', 'hidden');
\t questionTwoDiv.setAttribute('class', 'hidden');
\t questionThreeDiv.setAttribute('class', 'hidden');
\t questionFourDiv.setAttribute('class', 'hidden'); \t
\t questionFiveDiv.setAttribute('class', 'visible2');
\t clientForm.setAttribute('class', 'hidden'); \t
\t headerFour.setAttribute('class','hidden'); \t \t
\t headerFive.setAttribute('class','visibleHeader'); \t \t \t
};
radioFourNo.onclick = function() {
\t questionOneDiv.setAttribute('class', 'hidden');
\t questionTwoDiv.setAttribute('class', 'hidden');
\t questionThreeDiv.setAttribute('class', 'hidden');
\t questionFourDiv.setAttribute('class', 'hidden'); \t
\t questionFiveDiv.setAttribute('class', 'visible2');
\t clientForm.setAttribute('class', 'hidden'); \t
\t headerFour.setAttribute('class','hidden'); \t \t
\t headerFive.setAttribute('class','visibleHeader'); \t \t \t
\t
}; \t
radioFiveYes.onclick = function() {
\t questionOneDiv.setAttribute('class', 'hidden');
\t questionTwoDiv.setAttribute('class', 'hidden');
\t questionThreeDiv.setAttribute('class', 'hidden');
\t questionFourDiv.setAttribute('class', 'hidden'); \t
\t questionFiveDiv.setAttribute('class', 'hidden'); \t
\t clientForm.setAttribute('class', 'visible'); \t \t \t
\t headerFive.setAttribute('class','hidden'); \t \t
\t headerSix.setAttribute('class','visibleHeader'); \t \t \t
\t
}; \t \t
radioFiveNo.onclick = function() {
\t questionOneDiv.setAttribute('class', 'hidden');
\t questionTwoDiv.setAttribute('class', 'hidden');
\t questionThreeDiv.setAttribute('class', 'hidden');
\t questionFourDiv.setAttribute('class', 'hidden'); \t
\t questionFiveDiv.setAttribute('class', 'hidden');
\t clientForm.setAttribute('class', 'visible'); \t
\t headerFive.setAttribute('class','hidden'); \t \t
\t headerSix.setAttribute('class','visibleHeader'); \t \t
}; \t \t
<!-- Function to get the radio button value's -->
function getRadioButtonValue() {
if ((document.getElementById("quiz-question-one-yes").checked) && ((document.getElementById("quiz-question-two-yes").checked) || (document.getElementById("quiz-question-three-yes").checked)) && (document.getElementById("quiz-question-four-yes").checked) && (document.getElementById("quiz-question-five-yes").checked)) {
document.write('<style>' + 'html{background:#bf2e1a;}'+
\t 'p#greenText'+
\t '{background: #EFDFBC; display:block; width:800px; margin:0 auto; margin-top:300px;font-size:30px;color:green;text-align:-webkit-auto;padding:50px 50px 50px 50px;}'+
\t '</style>' + ' <p id="greenText">' + "Congratulations! Based on your responses, it appears that you may be eligible to file for U Visa, which would allow you to obtain a work permit for 4 years and apply for PERMANENT RESIDENCE after 3 years. You also qualify for a FREE consultation with experienced immigration attorney Erika Jimenez, who will confirm your eligibility and help you start the application process. You may call our office during business hours or use the calendar tool now to schedule your free consultation." + '</p>');
}
else if ((document.getElementById("quiz-question-one-yes").checked) && ((document.getElementById("quiz-question-two-no").checked) || (document.getElementById("quiz-question-three-no").checked)) && (document.getElementById("quiz-question-four-yes").checked) && ((document.getElementById("quiz-question-five-yes").checked) || (document.getElementById("quiz-question-five-no").checked))) {
document.write("then yellow");
}
else if ((document.getElementById("quiz-question-one-yes").checked) &&(((document.getElementById("quiz-question-two-yes").checked) || (document.getElementById("quiz-question-wo-no").checked))||((document.getElementById("quiz-question-three-yes").checked) || (document.getElementById("quiz-question-three-no").checked)))&&(document.getElementById("quiz-question-four-no").checked) && ((document.getElementById("quiz-question-five-yes").checked) || (document.getElementById("quiz-question-three-yes").checked))) {
\t document.write("then red");
}
}
</script>
</html>
當您添加皮棉到一個樣式表，請確保您都指向正確的路徑。在我看到你的'html'中，你認爲樣式表與你的'html'在同一個文件夾中。 – Franco