修改CSS样式

HTML及CSS代码段:

<body>
<style type="text/css">
input{
	margin:5px;						/*设置input元素的外边距为5像素*/
}
.input {
	font-size: 12pt;					/*设置文字大小*/
	color: #333333;						/*设置文字颜色*/
	background-color:#cef;	/*设置背景颜色*/
	border: 1px solid #000000;	/*设置边框*/
}
</style>
<form id="form1" name="form1" method="post" action="">&nbsp;&nbsp;名:<input type="text" name="name" id="name" />
  <br />&nbsp;&nbsp;贯:<input name="native" type="text" id="native" />
  <br />&nbsp;&nbsp;日:<input type="text" name="birthday" id="birthday" />
  <br />
  E-mail:<input type="text" name="email" id="email" />
  <br />
  <span>
  <input type="button" name="change" id="change" value="换肤"/>
  </span>
  <input type="button" name="default" id="default" value="恢复默认"/>
  <br /> 
</form>
</body>

JS代码段:

<script type="text/javascript">
$(document).ready(function(){
	$("#change").click(function(){	//绑定"换肤"按钮的单击事件
  		$("form>input").addClass("input");	//为表单元素的直接子元素input添加样式		
	});
	$("#default").click(function(){	//绑定“恢复默认”按钮的单击事件
  		$("form>input").removeClass("input");	//移除为表单元素的直接子元素input添加的样式		
	});
});
</script>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值