`
zhengshuangxi1226
  • 浏览: 50396 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

改变层背景颜色

CSS 
阅读更多
<label for="fontsize">字体大小</label>
02.       
<select id="fontsize">
03.       
<option value="12px">小号</option>
04.       
<option value="14px">较小</option>
05.       
<option value="16px" >中号</option>
06.       
<option value="18px">较大</option>
07.       
<option value="24px">大号</option>
08.</select>
09.<label for="backgroundbackground">背景颜色</label>
10.<select id="backgroundcolor">
11.       
<option value="#ffffff">默认</option>
12.       
<option value="gray">淡灰</option>
13.       
<option value="red">红色</option>
14.       
<option value="green">绿色</option>
15.<option value="yellow">明黄</option>
16.</select>
17.<label for="fontcolor">字体颜色</label>
18.<select id="fontcolor">
19.       
<option value="#000000">黑色</option>
20.       
<option value="#ff0000">红色</option>
21.       
<option value="#006600">绿色</option>
22.       
<option value="#0000ff">蓝色</option>
23.<option value="#660000">棕色</option>
24.</select>view sourceprint?01.<script type="text/javascript">
02. 
$(document).ready(function() {
03.     
$("#fontsize").change(function(){
04.         
var size = $("#fontsize").val();//获取下拉框的值
05.         
$("#endtext").css({"font-size":size }); //把值付给css的font-size
06.         
$("#endtext>*").css({"font-size":size }); //把值付给css的font-size
07.     
});
08.     
$("#backgroundcolor").change(function(){
09.         
var backgroundcolor = $("#backgroundcolor").val();
10.         
$("#endtext").css({"background":backgroundcolor});
11.     
});
12.     
$("#fontcolor").change(function(){
13.         
var fontcolor = $("#fontcolor").val();
14.         
$("#endtext").css({"color":fontcolor});
15.     
});
16. 
});
17.</script>
分享到:
评论

相关推荐

    改变对话框背景颜色

    "改变对话框背景颜色" 本文将详细介绍如何修改对话框的背景颜色,以VC为开发环境。通过重写对话框的OnPaint函数,我们可以实现对话框背景颜色的修改。 首先,需要理解对话框的绘制过程。在VC中,对话框的绘制是...

    css3改变文字背景颜色 css3改变文字背景颜色网页特效.zip

    在网页设计中,CSS3(层叠样式表第三版)为开发者提供了丰富的样式控制功能,其中包括动态改变文字背景颜色的特效。这个“css3改变文字背景颜色网页特效”压缩包可能包含了一系列示例代码和教程,帮助我们了解如何...

    背景颜色的改变.rar

    在IT领域,尤其是在网页设计、用户界面(UI)开发或者软件应用设计中,背景颜色的改变是一个常见的需求。它不仅能够影响用户体验,还可以根据不同的场景、主题或者用户偏好进行个性化定制。下面将详细讨论关于背景颜色...

    改变对话框的背景色 设置各种背景色

    3. **处理WM_CTLCOLORSTATIC消息**:如果对话框中包含静态文本控件(CStatic),它们的背景颜色默认是不会被覆盖的。为了改变这些控件的背景色,你需要处理WM_CTLCOLORSTATIC消息。在你的对话框类中添加以下代码: ...

    css背景颜色透明背景图片切换效果

    在本主题中,“css背景颜色透明背景图片切换效果”涉及的是如何利用CSS实现一种动态效果,即当用户交互时,网页背景颜色逐渐变为透明,并同时切换到不同的背景图片。这种效果可以增加用户体验的趣味性和互动性,常被...

    背景及文字颜色的改变.rar

    2. JavaScript:可以动态修改颜色,比如根据时间改变背景颜色,或响应用户交互事件。 3. UI库和框架:许多UI库(如Bootstrap)和前端框架(如React)提供了预设的色彩方案,简化了颜色管理。 六、无障碍性 遵循WCAG...

    窗口背景颜色逐渐改变

    在编程和用户界面设计中,窗口背景颜色的逐渐改变是一种常见的视觉效果,它能为用户提供更舒适、平滑的交互体验。这种效果通常被称为“背景渐变”或“色彩过渡”,在各种操作系统和应用程序中都有所应用。下面我们将...

    elementUI给table表头行设置背景颜色样式.pdf

    在Element UI框架中,我们经常会遇到需要自定义表格(table)样式的需求,特别是改变表头(thead)的背景颜色。Element UI提供了一种灵活的方式来实现这个功能,通过使用`header-cell-style`属性。下面我们将详细...

    div设置宽度背景颜色js代码.zip

    以下是一个简单的示例,展示了如何使用JavaScript来改变div的宽度和背景颜色: ```html &lt;!DOCTYPE html&gt; &lt;title&gt;JS设置div宽度和背景颜色 #myDiv { width: 100px; /* 初始宽度 */ height: 100px; /* 高度...

    背景颜色安全测试.rar_bean8u4_背景颜色安全测试

    这些代码可以实现动态背景颜色变换,渐变效果,甚至是基于用户交互改变背景颜色的功能。在HTML文件中,我们可以找到定义元素样式、颜色和动画的标签和属性,比如`&lt;style&gt;`、`background-color`、`transition`或`@...

    编辑框的文字颜色和背景都可以改变

    改变编辑框的背景颜色同样简单。在HTML中,可以使用`style.backgroundColor`;在CSS中,可以单独定义类,如`.editBox { background-color: #your_color; }`;在JavaScript中,是通过修改`style.backgroundColor`实现...

    div背景颜色怎样渐变 css实现div层背景颜色渐变代码

    本篇文章将详细介绍如何通过CSS代码实现div层背景颜色的渐变。 首先,我们来解析一下给定的代码片段。这段代码创建了一个简单的HTML页面,并在其中应用了CSS样式来实现背景颜色渐变。在`&lt;head&gt;`部分,有一个`...

    根据需要自由更换背景颜色代码.rar

    在IT行业中,JavaScript(简称JS)是一种广泛使用的脚本语言,尤其在网页开发中,它提供了丰富的功能,包括用户交互、动态内容以及我们关注的主题——改变背景颜色。在这个"根据需要自由更换背景颜色代码.rar"压缩包...

    用CSS JS控制Li背景颜色交替.rar

    在我们的场景中,CSS可以用来设置基础的背景颜色或者定义一种规则,让列表项按某种模式改变颜色。 例如,我们可以用CSS伪类`:nth-child()`来实现奇偶行颜色交替的效果: ```css ul li:nth-child(odd) { ...

    c# 修改label控件边框色及背景色

    在Windows Forms应用程序中,`Label`控件是...通过这种方式,你不仅能够改变`Label`的边框样式,还能自由选择边框和背景的颜色,使控件的外观更加符合你的设计需求。这在创建有特色的用户界面或进行UI定制时尤其有用。

    CSS3不同背景颜色的圆角按钮

    如果要为按钮创建动态变化的背景颜色,可以使用伪类选择器如`:hover`、`:active`和`:focus`来改变不同状态下的颜色。例如,当鼠标悬停在按钮上时,我们可以改变其背景色: ```css button:hover { background-color...

    html5 canvas多层波浪背景动画特效

    在这个“html5 canvas多层波浪背景动画特效”中,我们看到Canvas被用来创建一个交互式的背景动画,用户可以通过鼠标操作来改变波浪的颜色和饱和度,增加了用户体验的互动性。 首先,我们要理解Canvas的基本用法。...

    ios-彻底解决导航栏背景颜色渐变问题.zip

    在实际的UI设计中,为了追求更好的视觉效果,开发者可能会遇到需要对导航栏背景颜色进行渐变处理的需求。标题“ios-彻底解决导航栏背景颜色渐变问题.zip”所指的是一个解决方案,它提供了一种方法来完美地实现导航栏...

    CSS3背景颜色随文字滚动切换代码.zip

    "CSS3背景颜色随文字滚动切换代码"是一个利用CSS3特性实现的独特特效,它能让网页背景颜色随着文字标题的滚动而动态改变,为用户带来独特的浏览体验。 这个特效主要涉及到JavaScript(JS)和CSS3的结合使用。...

    CSS3鼠标悬停图片半透明渐变颜色背景遮罩动画特效

    在本文中,我们将深入探讨如何使用CSS3实现一个精美的鼠标悬停图片半透明渐变颜色背景遮罩动画特效。这个特效在用户将鼠标指针悬停在图片上时,会在图片上方添加一层带有渐变颜色的遮罩,当鼠标移开时,遮罩会以平滑...

Global site tag (gtag.js) - Google Analytics