Блог

Главная - Вопросы по программированию - Примените стиль для изменения цвета и размера текста

Примените стиль для изменения цвета и размера текста

#html

Вопрос:

Приведены три файла. Третий показывает вам, как должна выглядеть ваша готовая веб — страница. Два других должны быть включены в основной файл, созданный вами. На вашей веб-странице должно быть предусмотрено следующее: ..Не разрешайте использовать один и тот же цвет, выбранный как для цвета текста, так и для цвета ячеек. Показывать предупреждающее сообщение, если это выбрано. ..Добавьте опцию изменения размера шрифта между 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>

Комментарии:

1. Это не так, как это работает, вы должны сами делать свою домашнюю работу. Покажите нам, что вы пробовали.

2. Вы должны опубликовать то, что вы пробовали

3. Я отправил свой код, пожалуйста, помогите 🙁

4. Если apply_style является объявлением функции, единственное, что вы могли бы сделать для улучшения, — это заключить свою логику в квадратные скобки: функция apply_style() { // логика }. Вы захотите вызвать свою функцию позже, если я понимаю, что вы делаете: apply_style()

5. Примечание: не используйте таблицы для компоновки и не используйте <font> <frameset> теги или

Ответ №1:

Во-первых, чтобы использовать getElementById, вам действительно нужен элемент с нужным идентификатором. Во-вторых, вы должны вызвать свою функцию, иначе она ничего не сделает. В-третьих, вы упустили свой элемент сотовой связи.

Вот код и попробуйте его изучить:

 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>
Метки: