javascript - 如何将链接样式表添加到 document.write

标签 javascript html css

我有一个网页，我在其中使用 Javascript/CSS 来设置页面样式。 我想将我拥有的样式表与 document.write 链接起来，但我做不到。

我在 style.css 中有相同的代码，但样式没有加载。

为了设置页面样式，我在 getRadioButtonValue() 中添加了 CSS，但我想从样式表本身加载它。

注意:要加载页面，请单击"is"(针对所有 5 个问题)，然后单击“获取结果”以查看我尝试设置样式的页面。我隐藏 div，直到单击是或否。 

* {
    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;
	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{
	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{
	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{
	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>	
  <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() {	
	questionOneDiv.setAttribute('class', 'hidden');
	questionTwoDiv.setAttribute('class', 'visible2');
	questionThreeDiv.setAttribute('class', 'hidden');
	questionFourDiv.setAttribute('class', 'hidden');	
	questionFiveDiv.setAttribute('class', 'hidden');
	clientForm.setAttribute('class', 'hidden');		
	headerOne.setAttribute('class','hidden');
	headerTwo.setAttribute('class','visibleHeader');
};



radioOneNo.onclick = function() {
	questionOneDiv.setAttribute('class', 'hidden');
	questionTwoDiv.setAttribute('class', 'visible2');
	questionThreeDiv.setAttribute('class', 'hidden');
	questionFourDiv.setAttribute('class', 'hidden');	
	questionFiveDiv.setAttribute('class', 'hidden');
	clientForm.setAttribute('class', 'hidden');			
	headerOne.setAttribute('class','hidden');
	headerTwo.setAttribute('class','visibleHeader');
};

radioTwoYes.onclick = function() {
	questionOneDiv.setAttribute('class', 'hidden');
	questionTwoDiv.setAttribute('class', 'hidden');
	questionThreeDiv.setAttribute('class', 'visible2');
	questionTwoDiv.setAttribute('class', 'hidden');	
	questionFiveDiv.setAttribute('class', 'hidden');		
	clientForm.setAttribute('class', 'hidden');		
	headerTwo.setAttribute('class','hidden');
	headerThree.setAttribute('class','visibleHeader');		
};

radioTwoNo.onclick = function() {
	questionOneDiv.setAttribute('class', 'hidden');
	questionTwoDiv.setAttribute('class', 'hidden');
	questionThreeDiv.setAttribute('class', 'visible2');
	questionFourDiv.setAttribute('class', 'hidden');	
	questionFiveDiv.setAttribute('class', 'hidden');
	clientForm.setAttribute('class', 'hidden');	
	headerTwo.setAttribute('class','hidden');		
	headerThree.setAttribute('class','visibleHeader');		
};

radioThreeYes.onclick = function() {
	questionOneDiv.setAttribute('class', 'hidden');
	questionTwoDiv.setAttribute('class', 'hidden');
	questionThreeDiv.setAttribute('class', 'hidden');
	questionFourDiv.setAttribute('class', 'visible4');	
	questionFiveDiv.setAttribute('class', 'hidden');
	clientForm.setAttribute('class', 'hidden');	
	headerThree.setAttribute('class','hidden');		
	headerFour.setAttribute('class','visibleHeader');			
};

radioThreeNo.onclick = function() {
	questionOneDiv.setAttribute('class', 'hidden');
	questionTwoDiv.setAttribute('class', 'hidden');
	questionThreeDiv.setAttribute('class', 'hidden');
	questionFourDiv.setAttribute('class', 'visible4');	
	questionFiveDiv.setAttribute('class', 'hidden');
	clientForm.setAttribute('class', 'hidden');	
	headerThree.setAttribute('class','hidden');		
	headerFour.setAttribute('class','visibleHeader');			
};	

	
radioFourYes.onclick = function() {
	questionOneDiv.setAttribute('class', 'hidden');
	questionTwoDiv.setAttribute('class', 'hidden');
	questionThreeDiv.setAttribute('class', 'hidden');
	questionFourDiv.setAttribute('class', 'hidden');	
	questionFiveDiv.setAttribute('class', 'visible2');
	clientForm.setAttribute('class', 'hidden');	
	headerFour.setAttribute('class','hidden');		
	headerFive.setAttribute('class','visibleHeader');			
};

radioFourNo.onclick = function() {
	questionOneDiv.setAttribute('class', 'hidden');
	questionTwoDiv.setAttribute('class', 'hidden');
	questionThreeDiv.setAttribute('class', 'hidden');
	questionFourDiv.setAttribute('class', 'hidden');	
	questionFiveDiv.setAttribute('class', 'visible2');
	clientForm.setAttribute('class', 'hidden');	
	headerFour.setAttribute('class','hidden');		
	headerFive.setAttribute('class','visibleHeader');			
	
};	


radioFiveYes.onclick = function() {
	questionOneDiv.setAttribute('class', 'hidden');
	questionTwoDiv.setAttribute('class', 'hidden');
	questionThreeDiv.setAttribute('class', 'hidden');
	questionFourDiv.setAttribute('class', 'hidden');	
	questionFiveDiv.setAttribute('class', 'hidden');	
	clientForm.setAttribute('class', 'visible');			
	headerFive.setAttribute('class','hidden');		
	headerSix.setAttribute('class','visibleHeader');			
	
};		

radioFiveNo.onclick = function() {
	questionOneDiv.setAttribute('class', 'hidden');
	questionTwoDiv.setAttribute('class', 'hidden');
	questionThreeDiv.setAttribute('class', 'hidden');
	questionFourDiv.setAttribute('class', 'hidden');	
	questionFiveDiv.setAttribute('class', 'hidden');
	clientForm.setAttribute('class', 'visible');	
	headerFive.setAttribute('class','hidden');		
	headerSix.setAttribute('class','visibleHeader');		
};		


<!-- 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;}'+
	'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;}'+
	'</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))) {
	document.write("then red");
}
}

</script>

</html>

最佳答案

试试这个

  location === window.location

关于javascript - 如何将链接样式表添加到 document.write，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39819867/

上一篇：javascript - 在 Ajax 请求开始和完成时显示和隐藏元素(状态栏)

下一篇：html - 在移动设备上删除对象

相关文章：

javascript - 异步函数在 await 完成之前返回

html - 无法找出未应用复选框样式的原因

html - 将表格添加到表格行

javascript - 当屏幕尺寸小于特定尺寸时隐藏 div 元素

html - 在具有 float 的元素中水平和垂直居中文本

javascript - 通过 jquery 或 js 以逗号分隔值匹配或搜索字符串

javascript - @Angular (Angular 2) 无法使用 es5 进行编译 - Set、Map 等缺失

javascript - 如何修复 Javascript 中的 'missing) after argument list' 错误

html - 我们在 Bootstrap 中有任何组框吗

javascript - 单击外部或 ESC 时关闭模态窗口

©2024 IT工具网  联系我们