kaedah jquery untuk merealisasikan perubahan masa nyata saiz fon halaman web, warna latar belakang fon dan color

kaedah jquery untuk merealisasikan perubahan masa nyata saiz fon halaman web, warna latar belakang fon dan color_jquery

WBOY

Lepaskan： 2016-05-16 15:47:17

asal

2469 orang telah melayarinya

Contoh dalam artikel ini menerangkan cara jquery boleh menukar saiz fon, warna latar belakang fon dan warna halaman web dalam masa nyata. Kongsikan dengan semua orang untuk rujukan anda. Butirannya adalah seperti berikut:

Di sini kami menggunakan jquery untuk menukar saiz fon, warna latar belakang fon dan warna dalam masa nyata JQUERY menjadikan banyak perkara lebih mudah contoh, seperti sekarang Daripada contoh kecil ini, anda boleh belajar banyak mata pengetahuan.

Kesan operasi adalah seperti yang ditunjukkan di bawah:

Kod khusus adalah seperti berikut:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="js/jquery1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function() {
  $("#fontsize").change(
  function()
  {
   $("p").css({fontSize:this.value});//dom
  }
  )
  // change the font color
  $("#backgroundcolor").change(
  function()
  {
   $("p").css({background:this.value});
  }
  )
  // change the background color
  $("#fontcolor").change(
  function()
  {
   $("p").css({color:this.value});
  }
  )
});
</script>
</head>
<body>
<div id="formstylecontrols">
  <label for="fontsize">字体大小</label>
  <select id="fontsize">
    <option value="12px">小号</option>
    <option value="14px">较小</option>
    <option value="16px" >中号</option>
    <option value="18px">较大</option>
    <option value="24px">大号</option>
  </select>
  <label for="backgroundbackground">背景颜色</label>
  <select id="backgroundcolor">
    <option value="#F4FBFF">默认</option>
    <option value="gray">淡灰</option>
    <option value="red">红色</option>
    <option value="green">绿色</option>
  <option value="yellow">明黄</option>
  </select>
  <label for="fontcolor">字体颜色</label>
  <select id="fontcolor">
    <option value="#000000">黑色</option>
    <option value="#ff0000">红色</option>
    <option value="#006600">绿色</option>
    <option value="#0000ff">蓝色</option>
  <option value="#660000">棕色</option>
  </select>
  <label>
 <input type="submit" id="style" value="保存设置" />
 </label>
</div>
<p>三月初三，春日晴朗</p>
<p>浩浩荡荡的迎亲队伍，转过金陵城的主要街道，再把出尽风头的新皇后冯妙芝送到皇帝选定的洞房柔光殿。贺喜的大臣、亲友已经纷纷告退了，很快，帝后就要携手进入洞房，共度春宵了……</p>
<p>此时此刻，我站在这片泾水和渭水之间的大牧场上，脚下是三块古旧的巨大的石板铺就的小小广场，前面的松柏葱翠里是一座冷冷的尼庵，那就是曾经宠爱过我的君王给我的最后的归宿。</p>
</body>
</script>
</html>

Salin selepas log masuk

Saya harap artikel ini akan membantu reka bentuk pengaturcaraan jquery semua orang.