应用样式更改文本颜色和大小

给出了三个文件。第三个向您展示您完成的网页应该是什么样子。另外两个应该包含在您创建的主文件中。您的网页应包含以下内容：..不允许为文本颜色和单元格颜色选择相同的颜色。如果已选择，则显示警报消息。..添加字体大小选项，以便在3、5和7之间进行更改。

<html>
<head>
<title>HTML and JavaScript</title>
</head>
<body bgcolor="#EFEFEF">
<form name="StyleForm">
<table align="center">
<tr>
<td align="center" height="40" valign="top">
<b>STYLES</b>
</td>
</tr>
<tr>
<td>
<p>
<font size="2">Text Color:</font><br>
<select name="TextColor">
<option value="">- select -</option>
<option value="black">Black</option>
<option value="red">Red</option>
<option value="green">Green</option>
<option value="blue">Blue</option>
<option value="white">White</option>
</select>
</p>
<p>
<font size="2">Cell Color:</font><br>
<select name="CellColor">
<option value="">- select -</option>
<option value="black">Black</option>
<option value="red">Red</option>
<option value="green">Green</option>
<option value="blue">Blue</option>
<option value="white">White</option>
</select>
</p>
<p>
<input type="button" value="Apply Style">
</p>
</td>
</tr>
</table>
</form>
</body>
</html>

<html>
<head>
<title>HTML and JavaScript</title>
</head>
<body>
<table align="center" border="1" bordercolor="black">
<tr>
<td align="center">
<font size="3"><b>STYLE VIEWER</b></font>
</td>
</tr>
<tr>
<td align="center" height="100" width="400" style="background-color:white">
<div style="color:black">
<font size="5">Hello World Wide Web!</font>
<div>
</td>
</tr>
</table>
</body>
</html>

这是我的代码，它只是没有应用样式

<html>
<head>
<title>HTML and JavaScript</title>
<script>
function apply_style();
{
var TextColor = LeftFrame.document.StyleForm.TextColor.value;
var CellColor = LeftFrame.document.StyleForm.CellColor.value;
var TextElement = RightFrame.document.getElementById("MessageText");
textElement.style.color = textColor;
cellElement.style.backgroundColor = cellColor; return;
}
</script>
</head>
<frameset cols="30%,*">
<frame src="left1.html">
<frame src="right1.html">
</frameset>
</html>

首先，要使用getElementById，实际上需要有一个具有所需id的元素。其次，您应该调用您的函数，否则它将不会执行任何操作。第三，你错过了获得细胞元素的机会。

这里有一个代码并尝试研究它：

function apply_style() {
var textColor = document.getElementById('TextColor').value;
var cellColor = document.getElementById('CellColor').value;
var textElement = document.getElementById("MessageText");
var cellElement = document.getElementById("cell");
textElement.style.color = textColor;
cellElement.style.backgroundColor = cellColor; 
}

<html>
<head>
<title>HTML and JavaScript</title>
</head>
<body bgcolor="#EFEFEF">
<form name="StyleForm">
<table align="center">
<tr>
<td align="center" height="40" valign="top">
<b>STYLES</b>
</td>
</tr>
<tr>
<td>
<p>
<font size="2">Text Color:</font><br>
<select id="TextColor" name="TextColor">
<option value="">- select -</option>
<option value="black">Black</option>
<option value="red">Red</option>
<option value="green">Green</option>
<option value="blue">Blue</option>
<option value="white">White</option>
</select>
</p>
<p>
<font size="2">Cell Color:</font><br>
<select id="CellColor" name="CellColor">
<option value="">- select -</option>
<option value="black">Black</option>
<option value="red">Red</option>
<option value="green">Green</option>
<option value="blue">Blue</option>
<option value="white">White</option>
</select>
</p>
<p>
<input type="button" id="button" onclick="apply_style()"value="Apply Style">
</p>
</td>
</tr>
</table>
</form>
</body>
</html>

<html>
<head>
<title>HTML and JavaScript</title>
</head>
<body>
<table align="center" border="1" bordercolor="black">
<tr>
<td align="center">
<font size="3"><b>STYLE VIEWER</b></font>
</td>
</tr>
<tr>
<td id="cell" align="center" height="100" width="400" style="background-color:white">
<div style="color:black">
<font id="MessageText" size="5">Hello World Wide Web!</font>
<div>
</td>
</tr>
</table>
</body>
</html>

相关内容

最新更新

热门标签：