jquery字体颜色,JQuery完毕动态及时更换字体颜色

2019-07-21 05:21 来源:未知

本文实例汇报了JQuery完结动态及时退换字体颜色的办法。分享给我们供大家参照他事他说加以考察。具体分析如下:

JQuery完毕动态及时改动字体颜色的章程,jquery字体颜色

正文实例陈述了JQuery完毕动态及时改变字体颜色的格局。共享给大家供我们参照他事他说加以考察。具体分析如下:

JQuery动态及时改造字体的颜料,Ajax的成效类似,在文本框输入文字,再接纳色块,输入的文字就能化为色块标示的水彩值,很精确的职能啊。要是运转有错,请刷新一次页面就可以。

复制代码 代码如下:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ";
<html xmlns=";
<head>
<title>JQuery动态改造字体颜色</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>请输入文字</h1>
<input type="text" id="inputText" value="" />
<h1>请选取颜色</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>

希望本文所述对大家的jQuery程序设计有所支持。

本文实例陈说了JQuery完结动态及时改变字体颜色的章程。分享给大家供我们参谋。具...

JQuery动态及时改变字体的颜色,Ajax的机能类似,在文本框输入文字,再采纳色块,输入的文字就能够成为色块标示的颜料值,很不错的功能啊。假使运维有错,请刷新叁遍页面就可以。

复制代码 代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ";
<html xmlns=";
<head>
<title>JQuery动态改动字体颜色</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>请输入文字</h1>
<input type="text" id="inputText" value="" />
<h1>请采纳颜色</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:#韦德娱乐1946网页版,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>

盼望本文所述对大家的jQuery程序设计有着援助。

您或者感兴趣的稿子:

  • jquery实现的随便多彩tag标签随机颜色和字号大小效果
  • jQuery插件echarts设置折线图中折线线条颜色和折线点颜色的章程
  • jQuery与js完结颜色渐变的不二秘籍
  • jQuery完结的文字hover颜色渐变效果实例
  • jquery达成实时改动网页字体大小、字体背景观和颜料的点子
  • jQuery达成鼠标滑过Div层背景变颜色的章程
  • jQuery获取样式中颜色值的不二等秘书籍
  • jQuery获取随机颜色的实例代码
TAG标签: 韦德娱乐1946
版权声明:本文由韦德娱乐1946_韦德娱乐1946网页版|韦德国际1946官网发布于韦德娱乐1946网页版,转载请注明出处:jquery字体颜色,JQuery完毕动态及时更换字体颜色