关于input为color时绑定对应内容改变相应颜色
来源：互联网 发布：mysql攻击全攻略 编辑：程序博客网 时间：2024/06/07 00:36
仅以demo为例子说明其用法,其中的jquery版本问题不计,参考者可以直接自行下载和引入相应的js文件即可!
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="userCommon/jquery-1.8.3.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<label for="fontsize">字体大小</label>
<select id="fontSizeInput">
<option selected="selected">--选择字体大小--</option>
<option value="12px">12px</option>
<option value="13px">13px</option>
<option value="14px">14px</option>
<option value="15px">15px</option>
<option value="16px">16px</option>
<option value="17px">17px</option>
<option value="18px">18px</option>
</select>
<!--<input type="number" id="fontSizeInput">-->
<input type="color" id="sizeColor">
<input type="color" id="bgColor">
<p>人生若只如初见,何事秋风悲画扇!等闲变却故人心,却道故人心易变.</p>
</body>
<script type="text/javascript">
$(function(){
//改变字体大小
$("#fontSizeInput").change(function() {
$("p").css({
fontSize: this.value
});
});
//改变字体颜色
$('#sizeColor').change(function(){
var sizeCol = $(this).val();
$('p').css('color',sizeCol);
});
//改变字体背景色
$('#bgColor').change(function(){
var bgCol = $(this).val();
$('p').css('backgroundColor',bgCol);
});
})
</script>
</html>
- 关于input为color时绑定对应内容改变相应颜色
- js实现<input type="color">改变背景颜色
- color颜色对应的数字
- Extjs框架html5中input、textarea的placeholder，元素内容为空时，颜色为灰色
- input框自动填充内容背景颜色为黄色解决方法
- input框自动填充内容背景颜色为黄色解决方法
- 改变input的placeholder颜色
- 改变input placeholder 的颜色
- 自定义color文件夹来改变字体颜色
- 改变颜色按钮（color button）的颜色
- radio选中状态对应文字改变颜色
- 改变input框光标的颜色
- input的改变placeholder的颜色
- 改变 input 焦点光标的颜色
- 关于数据绑定的时候判断Repeater中数据改变其整行颜色
- actionbar为title改变颜色
- 捕获input 文本框内容改变的事件
- input标签内容改变的触发事件
- STM32系统学习——RCC（使用HSE/HSI配置时钟）
- bootstrap-table-demo说明
- Shiro浅显理解
- docker离线安装
- Java 程序连接 Informix 数据库方法实例介绍
- 关于input为color时绑定对应内容改变相应颜色
- scikit-learn常用的一些函数及在实战中的用法
- hive left join 条件on 和 where 的放置
- 五十种编程语言简介(1)
- (译) 在IOS中实现导入&导出文档
- js--打卡--11.27 toString方法的改造。
- Codeblocks-使用错误整理(1)cannot open output file
- 越狱手机修改ssh密码
- ubuntu编辑网络配置文件后如何保存？
