Maison >interface Web >js tutoriel >méthode jquery pour réaliser un changement en temps réel de la taille de la police de la page Web, de la couleur d'arrière-plan de la police et de color_jquery
L'exemple de cet article décrit comment jquery peut modifier la taille de la police, la couleur d'arrière-plan de la police et la couleur de la page Web en temps réel. Partagez-le avec tout le monde pour votre référence. Les détails sont les suivants :
Ici, nous utilisons jquery pour modifier la taille de la police, la couleur de l'arrière-plan de la police et la couleur en temps réel. JQUERY facilite beaucoup de choses. C'est en effet un petit plug-in pratique. Les amis qui ne sont pas familiers avec JQ devraient en regarder davantage. des exemples, comme maintenant À partir de ce petit exemple, vous pouvez apprendre beaucoup de points de connaissances.
L'effet de l'opération est comme indiqué ci-dessous :
Le code spécifique est le suivant :
<!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>
J'espère que cet article sera utile à la conception de la programmation jquery de chacun.