根据下拉列表,改变button的css和颜色

最新推荐文章于 2021-06-03 11:04:39 发布
最新推荐文章于 2021-06-03 11:04:39 发布
阅读量695 收藏 1
点赞数
分类专栏： jquery 文章标签： css jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/kouwoo/article/details/49800171
版权 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<style type="text/css">
.button4 {
	border-radius: 50%;
	width: 50px;
	height: 50px;
}

.button3 {
	width: 50px;
	height: 20px;
	border-radius: 10px;
}

.button2 {
	width: 50px;
	height: 20px;
	border-radius: 5px;
}

.button1 {
	width: 50px;
	height: 20px;
	border-radius: 2px;
}


.vertical-container{
        display: -webkit-flex;
        display: flex;
        -webkit-align-items: center;
              align-items: center;
        -webkit-justify-content: center;
              justify-content: center;
    }
</style>
<script src="jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
	$(document).ready(function() {

		$("#s_type1").change(function() {
			$("#b1").removeClass();
			$("#b1").addClass($("#s_type1").val());
		});

		$("#s_color1").change(function() {
			$("#b1").css('background', $("#s_color1").val())
		});

		$("#s_type2").change(function() {
			$("#b2").removeClass();
			$("#b2").addClass($("#s_type2").val());
		});

		$("#s_color2").change(function() {
			$("#b2").css('background', $("#s_color2").val())
		});

		$("#s_type3").change(function() {
			$("#b3").removeClass();
			$("#b3").addClass($("#s_type3").val());
		});

		$("#s_color3").change(function() {
			$("#b3").css('background', $("#s_color3").val())
		});

		$("#s_type4").change(function() {
			$("#b4").removeClass();
			$("#b4").addClass($("#s_type4").val());
		});

		$("#s_color4").change(function() {
			$("#b4").css('background', $("#s_color4").val())
		});

	});
</script>
</head>
<body>
    <table>
        <tr>
            <td>按钮1</td>
            <td><select id="s_type1">
                    <option value="0">请选择</option>
                    <option value="button1">类型1</option>
                    <option value="button2">类型2</option>
                    <option value="button3">类型3</option>
                    <option value="button4">类型4</option>
            </select> <select id="s_color1">
                    <option value="gray">请选择</option>
                    <option value="red">红色</option>
                    <option value="blue">蓝色</option>
                    <option value="green">绿色</option>
                    <option value="white">白色</option>
            </select></td>
        </tr>
        <tr>
            <td>按钮2</td>
            <td><select id="s_type2">
                    <option value="0">请选择</option>
                    <option value="button1">类型1</option>
                    <option value="button2">类型2</option>
                    <option value="button3">类型3</option>
                    <option value="button4">类型4</option>
            </select> <select id="s_color2">
                    <option value="gray">请选择</option>
                    <option value="red">红色</option>
                    <option value="blue">蓝色</option>
                    <option value="green">绿色</option>
                    <option value="white">白色</option>
            </select></td>
        </tr>
        <tr>
            <td>按钮3</td>
            <td><select id="s_type3">
                    <option value="0">请选择</option>
                    <option value="button1">类型1</option>
                    <option value="button2">类型2</option>
                    <option value="button3">类型3</option>
                    <option value="button4">类型4</option>
            </select> <select id="s_color3">
                    <option value="gray">请选择</option>
                    <option value="red">红色</option>
                    <option value="blue">蓝色</option>
                    <option value="green">绿色</option>
                    <option value="white">白色</option>
            </select></td>
        </tr>
        <tr>
            <td>按钮4</td>
            <td><select id="s_type4">
                    <option value="0">请选择</option>
                    <option value="button1">类型1</option>
                    <option value="button2">类型2</option>
                    <option value="button3">类型3</option>
                    <option value="button4">类型4</option>
            </select> <select id="s_color4">
                    <option value="gray">请选择</option>
                    <option value="red">红色</option>
                    <option value="blue">蓝色</option>
                    <option value="green">绿色</option>
                    <option value="white">白色</option>
            </select></td>
        </tr>
    </table>

    <br />
    <div class="vertical-container"
        style="background-repeat: no-repeat; background-image: url('http://img.sootuu.com/vector/2006-4/20064249924411.jpg'); height: 240; width: 230;text-align: center;">
        <div >
        <table style="margin: 0 auto">
            <tr>
                <td>
                    <button id="b1">按钮1</button>
                    <button id="b2">按钮2</button>
                </td>
            </tr>
            <tr>
                <td>
                    <button id="b3">按钮3</button>
                    <button id="b4">按钮4</button>
                </td>
            </tr>
        </table>
        </div>
    </div>
</body>
</html>

卡卡的喵
关注
专栏目录
css之button过渡
九日的博客
07-29 819
点击效果：点击后会将下部阴影给遮挡 代码+注释： /* transition 属性设置元素当过渡效果，四个简写属性为： transition-property 指定CSS属性的name，transition效果 transition-duration transition效果需要指定多少秒或 毫秒才能完成 transition-timing-function 指定transitio...
css按钮按下改按钮颜色_现代CSS按钮基础知识简介
culi3182的博客
08-16 5720
css按钮按下改按钮颜色Update (9th July 2016): This article has been updated to include <button> tags rather than anchor tags to meet modern accessibility best practices. If you are working with buttons, a...
用事件与CSS改变按钮不同状态下的颜色
weixin_30947043的博客
04-11 403
目标效果： 　　　　表单的群发按钮，在鼠标悬停时为深蓝色，鼠标离开时为淡蓝色。 HTML代码： 　　　　<button id="submitBtn" class="btn" onmouseover="this.className='input_move'" onmouseout="this.className='input_out'" type="submit" tabin...
html,button的背景色和文字颜色
热门推荐
Top5软件工程硕士，先后在京东、字节从事多年Java后端开发、实时和离线大数据开发
07-06 11万+
新建 background-color表示背景色 color表示文字的颜色
css 按钮颜色
hugejihu9的专栏
01-22 3566
文章来自：源码在线https://www.shengli.me/css/615.html     效果：    
帽子博客下拉列表
02-14
例如，可以使用`x-data`定义一个包含下拉状态的数据对象，然后用`x-bind:class`根据状态改变元素的类名，从而控制下拉列表的显示和隐藏。AlpineJS的`x-show`指令可以轻松地实现这个功能，当其绑定的表达式为真时，...
bootstrap下拉列表美化
02-24
1. **颜色和大小调整**：Bootstrap提供了多种预定义的按钮类（如`btn-primary`, `btn-success`, `btn-info`, `btn-warning`, `btn-danger`）来改变按钮颜色。同时，可以通过修改`btn-lg`, `btn-sm`, `btn-xs`来调整...
BootStrap 图片样式、辅助类样式和CSS组件的实例详解
11-30
接下来是辅助类样式，这些样式提供了一种快速改变文本和元素外观的方法。例如，`.text-muted`用于给文本添加柔和的颜色，`.text-primary`、`.text-success`、`.text-info`、`.text-warning`和`.text-danger`分别对应...
一组超酷的自定义网页表单元素(复选框单选框下拉列表)效果.zip
最新发布
11-22
本资源“一组超酷的自定义网页表单元素(复选框单选框下拉列表)效果.zip”提供了创新的表单元素设计，包含复选框、单选框以及下拉列表的定制样式，将传统的HTML元素进行了美化和功能增强。 首先，我们来详细了解这些...
css 给select下拉框添加背景颜色
LittleUniverse
02-14 5万+
生成selected下拉框的html代码<!-- 添加css样式 --> <style type="text/css"> .blue { background-color:#0000FF; color:#FFF; } .red { background-color: #E20A0A; color: #ffffff; } .orange{ background-
css按钮按下改按钮颜色_20个新鲜多彩CSS3按钮
culiao9310的博客
09-28 1584
css按钮按下改按钮颜色Here is the result of an experiment with fonts and css3 properties like text-shadow and box-shadow: 这是使用字体和css3属性(例如text-shadow和box-shadow)进行实验的结果： Click on this image to see a DEMO 点击此图片查...
使用 JavaScript 中的 document 对象的属性，根据下拉框中选择的属性，更改页面中的字体颜色和背景颜色
杨明金的博客
11-01 4998
查看本章节 查看作业目录 需求说明： 使用 JavaScript 中的 document 对象的属性，根据下拉框中选择的属性，更改页面中的字体颜色和背景颜色 实现思路： 在页面的 <body> 节点下加入 <h2> 节点，在 <h2> 节点下加入文本节点，显示为：更改字体颜色和背景颜色 在页面的 <body> 节点下加入 <select> 节点，设置 <select> 节点的 id 属性 在 <select&gt
CSS——鼠标移动显示下拉框，变色
邢美玲
04-04 2307
CSS 还挺好玩
改变颜色按钮（color button）的颜色
u012750259的专栏
01-21 1万+
1. 生成颜色选择按钮   选择颜色的按钮在mfc9之前有许多自绘的，mfc9出来之后带来了一个强大的类CMFCColorButton。一切都可以那么漂亮~   先放一个按钮控件在对话框上   然后右键点击选择添加变量，类名不是CButton是CMFCColorButton。。   这时，按钮就变成颜色选择按钮，如图    
JavaScript——点击按钮使div变色
Chenbaby_的博客
11-14 1万+
head> meta charset="UTF-8"> title>点击按钮使div变色title> style> div{ border:1px solid white; width:200px; height:200px; background-color:#7f7f7f; } /style> head> body> div id="one">div>
html 按钮悬浮效果,css3按钮悬浮效果
weixin_42509766的博客
06-03 1043
a {text-decoration:none}body {margin:0;padding:0;width:100%;height:100vh;display:flex;justify-content:center;align-items:center;flex-direction:column;font-family:Raleway;background-color:#ecf0f1;}.cop...
HTML/CSS基础：列表、表格与表单的使用详解
本文主要介绍了HTML中关于列表、表格和表单的基础知识，包括无序列表、有序列表、嵌套列表...同时，CSS可以进一步对这些元素进行样式修饰，如改变背景颜色、调整表格宽度、设置文字对齐方式等，以达到理想的视觉效果。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值