[РАБОТНИЧЕК ]

style switcher
18.06.2009, 15:52
При нажатии на кнопку, подсвечивает текст
-----------------------------------------------------------------
Пример использования скрипта:
  
:(
-----------------------------------------------------------------
Код скрипта:

Вставьте следующий код между тегами <BODY></BODY>

<p>
<small>»» <a href="switchStyle.html" onclick="switchStyle();return false;" title="Change foreground/background colors">Change foreground/background colors</a></small></p>

<div class="textDefault">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p></div>
<div class="plain">
<p>
Ma quande lingues coalesce, li grammatica del resultant lingue es plu simplic e regulari quam ti del coalescent lingues. Li nov lingua franca va esser plu simplic e regulari quam li existent Europan lingues.</p></div>
<div class="textDefault">
<p>
Epsum factorial non deposit quid pro quo hic escorol. Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus unum. Defacto lingo est igpay atinlay.</p></div>

Вставьте следующий код между тегами <HEAD></HEAD>

<script type="text/javascript">function switchStyle(){
  // return array of all DIV elements
  var divs = document.getElementsByTagName("DIV");
  // Iterate through all DIVs in array
  for(var i = 0; i < divs.length; i++){
    // If current DIV is using "textDefault" styling,
    // change it to use "textAlternate" styling
    if(divs[i].className == "textDefault")
      divs[i].className = "textAlternate";
    // If current DIV is using "textAlternate" styling,
    // change it back to use "textDefault" styling
    else if(divs[i].className == "textAlternate")
      divs[i].className = "textDefault";
  }
}
</script>

Вставьте этот код в свой внешний CSS файл, либо в разделе <style> в разделе HEAD Вашего HTML документа.

 /* Styling common to both states (add extra styling as needed) */
.textDefault, .textAlternate {
  padding: 10px;
  width: 300px;
}
/* Styling for the default state (add extra styling as needed) */
.textDefault {
  background-color: #fff;
  color: #000099;
  border: #000;
}
/* Styling for the alternate state (add extra styling as needed) */
.textAlternate {
  background-color: #000099;
  color: #fff;
  font-weight: bold;
}




Категория: CSS | Добавил: Администратор | Теги: подсвечивание текста, Java script
Просмотров: 430 | Загрузок: 0 | Рейтинг: 0.0/0
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]