Question

我创建了一个兴趣计算器，我希望金额和兴趣转为绿色而不是整个文本字符串。

到目前为止，我已经尝试过不同类型的dom操作，但是没有成功地解决这两个值。 document.getElementById("resultat").style.color = "green";会将整个文字变为绿色......

在我的代码中，我有var startAar和var rente，这两个作为输入值并显示在textarea中。

我怎样才能做到这一点？

<!DOCTYPE html>
<html>
<head>
	<title>Rente Kalkulator</title>
	<meta charset="utf-8">
	<script src="https://use.fontawesome.com/af4e45f5ea.js"></script>
	<link rel="icon" type="image/png" sizes="16x16" href="img/favicon.ico">
	<script type="text/javascript">
		
		window.onload = btn;

		function btn() {
			document.getElementById("btn").onclick = regnUt; 
		}

		
		function regnUt() {
			var startAar = 1; // Start år er satt til 1
			var pengeBelop = document.getElementById("pengeBelop").value; // Bruker input i "Pengebeløp"
			var antallAar = document.getElementById("antallAar").value; // Bruker input i "Antall år"
			var rente = document.getElementById("rente").value; // Bruker input i "Rente"

			for (var antallAar; startAar <= antallAar; startAar++) { // Sjekk om brukers "Antall år" input er mindre en startAar, startAar = 1, legg til 1 til startAar samsvarer antallAar
				
				if (startAar < antallAar) { // Om startAar er mindre en antallAar, legg til startAar til pengeBelop
					pengeBelop += startAar;
				}

				pengeBelop = pengeBelop * (1+rente/100); // Formel for rente

				document.getElementById("resultat").innerHTML += "Etter " + startAar + " år " + "har jeg " +  pengeBelop.toFixed(0) + "kr" + " om renten er på " + rente + "%" + ("\n");
				document.getElementById("resultat").style.border = " 2px solid #6dc066";
			}
		}
	</script>
	<style type="text/css">
	@import url('https://fonts.googleapis.com/css?family=Roboto');

		* {
			margin: 0;
			padding: 0;
		}

		body {
			height: 100%;
			text-align: center;
			background-color: #f7f7f7;
			font-family: 'Roboto', sans-serif;
		}

		h1 {
			padding-top: 3%;
			text-align: center;
			letter-spacing: 3px;
			color: #f7f7f7;
			font-size: 35px;
			text-shadow: 1px 1px 1px #000000;
			transition-duration: 0.4s;
		}

		h1:hover {
			font-size: 38px;
		}

		a {
			text-decoration: none;
			color: #f7f7f7;
		}

		h3 {
			background-color: #f7f7f7;
			color: #333333;
			text-align: left;
			padding-left: 10px;
			padding-top: 12%;
			padding-bottom: 5px;
			font-size: 24px;
		}

		#header {
			height: 25vh;
			width: 100%;
			background-color: #6dc066;
			display: block;
			box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
		}

		#kalkulator {
			background-color: #f7f7f7;
			float: left;
			padding-left: 15%;
			margin-top: 15px;
		}

		#resultat {
			float: right;
			margin-top: 5%;
			margin-right: 7%;
			font-family: 'Roboto', sans-serif;
			font-size: 16px;
			padding-left: 70px;
			line-height: 25px;
			resize: none;
			text-align: left;
		}

		#resultat:focus {
			outline: none;
			border: 2px solid #6dc066;
		}

		input {
			padding-top: 12px;
			padding-bottom: 12px;
			padding-right: 130px;
			padding-left: 10px;
			float: left;
			text-align: left;
			font-size: 22px;
			transition-duration: 0.4s;
		}

		input[type=number]::-webkit-inner-spin-button, 
		input[type=number]::-webkit-outer-spin-button { 
		    -webkit-appearance: none;
		    -moz-appearance: none;
		    appearance: none;
		    margin: 0; 
		}

		input:focus {
			outline: none;
			border: 2px solid #6dc066;
			background-color: #eeeeee;
		}

		button {
			margin-top: 25px;
			padding: 15px 40px;
			border-style: none;
			transition-duration: 0.4s;
			border-radius: 8px;
			color: white;
			font-size: 16px;
			background-color: #6dc066;
			font-family: 'Roboto', sans-serif;
		}

		button:hover {
			padding: 17px 70px;
			font-size: 18px;
			background-color: #333333;
			color: #f7f7f7;
		}

		button:focus {
			outline: none;
		}

		button:active {
			background-color: #333333;
			box-shadow: 0 5px #666;
			transform: translateY(8px);
		}
		
	</style>

</head>
<body>
<div id="header">
<h1><a href="ekstra1.html">Rentekalkulator</a><br/><i class="fa fa-money" aria-hidden="true"></i></h1>
</div>
<div id="kalkulator">
<h3>Pengebeløp:</h3>
<input type="number" id="pengeBelop" placeholder="kr"><br/>	
<h3>Antall år:</h3>
<input type="number" id="antallAar" placeholder="år"><br/>
<h3>Rente:</h3>
<input type="number" id="rente" placeholder="%"><br/>
<button type="button" id="btn">Regn ut</button><br/>
</div>
<textarea readonly cols='55' rows='15' id="resultat"></textarea>
</body>
</html>

`

Answer 1

您的问题不明确，但我建议您将其添加到样式标记的末尾（我的意思是在按钮：活动 selectpr之后）：

input[type='text'], input[type='number'],textarea{
            color: green;
        }

Answer 2

您无法在textarea元素中设置单个单词的样式，该样式将应用于textarea中文本的全部。

如果resultat元素仅用于向用户显示消息而不用于输入值，那么您可以将其替换为div元素并在其中div使用span元素包装要突出显示的文本部分：

HTML：<div id="resultat"></div>，在CSS中设置高度和宽度。

javascript：

document.getElementById("resultat").innerHTML = 
    "Etter "+"<span class='startAar'>"+startAar+" år "+"</span>"+
    "har jeg "+"<span class='belop'>"+pengeBelop.toFixed(0)+"kr"+"</span>"+
    "om renten er på "+"<span class='rente'>"+rente+"%"+"</span>"+
   ("\n");

CSS：

.startAar, .belop, .rente {
    color: green;
}

#resultat {
    height: 100px;
    width: 300px;
}

更改表示为文本的输入值的颜色

2 个答案: