JQuery implements the method of changing font color dynamically and timely

2020-05-12 02:15:42
OfStack

This article illustrates an example of how JQuery can dynamically and timely change font colors. Share with you for your reference. The specific analysis is as follows:

JQuery dynamically and timely changes the font color, Ajax effect is similar, in the text box input text, and then select the color block, the input text will become the color block marked value, very good effect. If there is an error, please refresh the page once.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3c.org/1999/xhtml">

<head>

<title>JQuery Dynamically change the font color </title>

<meta charset="gb2312" />

<style type="text/css">

h1 {

    font:bold 15px/19px Georgia, serif;

    }

p {margin:0;}

#colorselections a {

    border:2px solid #fff;

    margin-right:4px;

    display:block;

    float:left;

    }

a img {

    border:1px solid #fff;

    width:22px;

    height:22px;

    vertical-align:bottom;

    }

#colorselections{zoom:1}    

#colorselections a.on {

    border:2px solid #d5680d;

    }

#previewer {

    margin:26px 0 20px 0;

    padding:6px;

    clear:left;

    font:bold 19px/25px Verdana;

    border:1px solid #ccc;

    width:80%;

    }

</style>

<script type="text/javascript" src="js/jquery1.3.2.js"></script>

<script type="text/javascript">

$(function(){

    $("#inputText").keyup(function(){

        $("#previewer").empty();

        $("#previewer").text($(this).attr("value"));

    });

});

$(function(){

    $("#colorselections a").click(function(){

        $(this).addClass("on").siblings().removeClass("on");

        $("#previewer").css("color",$(this).css("background-color"))

    });

});

</script>

</head>

<body>

<h1> Please enter text </h1>

<input type="text" id="inputText" value="" />

<h1> Please select the color </h1>

<p>

<span id="colorselections"> 

    <a href="#" style="background-color:#000000;" class="on">

    <img src="/jscss/demoimg/201006/space.gif" class="colorbox" alt="Black" />

    </a>

    <a href="#" style="background-color:#003399;" class="">

    <img src="/jscss/demoimg/201006/space.gif" class="colorbox" alt="Light Blue" />

    </a>

    <a href="#" style="background-color:#5E5E5E;" class="">

    <img src="/jscss/demoimg/201006/space.gif" class="colorbox" alt="Medium Gray" />

    </a>

    <a href="#" style="background-color:#00524E;" class="">

    <img src="/jscss/demoimg/201006/space.gif" class="colorbox" alt="Dark Teal" />

    </a>

    <a href="#" style="background-color:#258B86;" class="">

    <img src="/jscss/demoimg/201006/space.gif" class="colorbox" alt="Light Teal" />

    </a>

    <a href="#" style="background-color:#DA7E33;" class="">

    <img src="/jscss/demoimg/201006/space.gif" class="colorbox" alt="Orange" /></a>

    <a href="#" style="background-color:#198541;" class="">

    <img src="/jscss/demoimg/201006/space.gif" class="colorbox" alt="Green" />

    </a>

</span>

</p>

<br clear="both" />

<p id="previewer"></p>

</body>

</html>

I hope this article has helped you with your jQuery programming.