Question

我创建了一个在JavaScript中生成随机文本的按钮。我想将随机生成的文本设置为按钮下方，居中，并具有以下颜色：＃8a2be2。

＆＃13;

   
<!-- arrays -->
function GetValue()
{
    var myarray= new Array();

	myarray[0]="The calcium in our bones and the iron in our blood come from ancient explosions of giant stars."
	myarray[1]="The Chinese giant salamander can grow to be 6 feet (1.8 m) long, making it the largest salamander in the world."
<!--END-->	
    var random = myarray[Math.floor(Math.random() * myarray.length)];
    //alert(random);
    document.getElementById("fact button").innerHTML=random;
}

＆＃13;

<input  type="button" id="fact_button" value="Fact Button" onclick="GetValue();" />
<p id="fact button" ></p>
<h2 class="h2">click fact button for an amazing fact!</class> </h2>

＆＃13;

Answer 1

在p或div元素中添加文本，如下所示

＆＃13;

   
<!-- arrays -->
function GetValue()
{
    var myarray= new Array();

	myarray[0]="<p style='color:#8a2be2'>The calcium in our bones and the iron in our blood come from ancient explosions of giant stars.</p>"
	myarray[1]="<p style='color:#8a2be2'>The Chinese giant salamander can grow to be 6 feet (1.8 m) long, making it the largest salamander in the world.</p>"
<!--END-->	
    var random = myarray[Math.floor(Math.random() * myarray.length)];
    //alert(random);
    document.getElementById("fact button").innerHTML=random;
}

＆＃13;

<input  type="button" id="fact_button" value="Fact Button" onclick="GetValue();" />
<p id="fact button" ></p>
<h2 class="h2">click fact button for an amazing fact!</class> </h2>

＆＃13;

Answer 2

＆＃13;

   
<!-- arrays -->
function GetValue()
{
    var myarray= new Array();

	myarray[0]="The calcium in our bones and the iron in our blood come from ancient explosions of giant stars."
	myarray[1]="The Chinese giant salamander can grow to be 6 feet (1.8 m) long, making it the largest salamander in the world."
<!--END-->	
    var random = myarray[Math.floor(Math.random() * myarray.length)];
    //alert(random);
    document.getElementById("fact button").innerHTML=random;
}

＆＃13;

<input  type="button" id="fact_button" value="Fact Button" onclick="GetValue();" />
<p id="fact button" style="text-align:center;color:#8a2be2;"></p>
<h2 class="h2">click fact button for an amazing fact!</class> </h2>

＆＃13;

如果您想应用css样式，只需将它们添加到<p>标记，如上所示，或导入外部样式表。

Answer 3

您可以使用document.getElementById("fact button").style.[property] = "[value]";设置不同的样式。以下代码显示了如何实现预期目标。

   
<!-- arrays -->
function GetValue()
{
    var myarray= new Array();

	myarray[0]="The calcium in our bones and the iron in our blood come from ancient explosions of giant stars."
	myarray[1]="The Chinese giant salamander can grow to be 6 feet (1.8 m) long, making it the largest salamander in the world."
<!--END-->	
    var random = myarray[Math.floor(Math.random() * myarray.length)];
    //alert(random);
    document.getElementById("fact button").innerHTML=random;
    document.getElementById("fact button").style.color ="#8a2be2";
    document.getElementById("fact button").style.textAlign="center";
}

<input  type="button" id="fact_button" value="Fact Button" onclick="GetValue();" />
<p id="fact button" ></p>
<h2 class="h2">click fact button for an amazing fact!</class> </h2>

将样式添加到java脚本字符串

3 个答案: