css text-transform

最新推荐文章于 2022-07-26 23:53:33 发布

信-老僧

最新推荐文章于 2022-07-26 23:53:33 发布

阅读量519

点赞数

分类专栏： css 文章标签： css html javascript

本文链接：https://blog.csdn.net/FOLOYO586/article/details/46933571

版权

css 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>text-transform</title>
<script src="jquery-1.8.2.js" type="text/javascript"></script>
<style>
	.capitalize{
		text-transform:capitalize;
	}
	.uppercase{
		text-transform:uppercase;
	}
	.lowercase{
		text-transform:lowercase;
	}
	.none{
		text-transform:none;
	}
	fieldset{
		height:200px;
		width:500px;
		border:1px solid red;
	}
	
	select{
		width:200px;
		margin-top:10px;
		border:1px solid red;
	}
</style>
<script>
	$(function(){
		$("#operate").change(function(){
			$("#target").removeAttr("class");
			$("#target").attr("class",$(this).val());
		});
	});
</script>
</head>
<body>
	<fieldset>
		<legend>演示</legend>
		<div id="target">
			i love you .Not because YOUR beauty.
			<span style="display:block">hello World</span>
		</div>
	</fieldset>
	<select id="operate">
		<option></option>
		<option value="none">none</option>
		<option value="capitalize">首字母大写</option>
		<option value="uppercase">大写</option>
		<option value="lowercase">小写</option>
	</select>
</body>
</html>