JS实战 · 仿css样式选择器
代码如下：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>仿css样式选择器</title>
<style type="text/css">
#textid{
height: 100px;
width: 300px;
}
#fontid{
height: 20px;
width: 300px;
}
#selid{
width: 300px;
}
</style>
<script type="text/javascript">
function changeText(){
/*拿到select的节点*/
var selNode = document.getElementById("selid");
/*将option中的值赋给textfont作为样式*/
var textfont = selNode.options[selNode.selectedIndex].value;
/*拿到欲变化的文本节点*/
var textidNode = document.getElementById("textid");
/*拿到底部的提示文本的节点*/
var fontidNode = document.getElementById("fontid");
var spanidNode = document.getElementById("sid");
/*通过文本节点对象的style属性将样式赋给该文本*/
textidNode.style.textTransform = textfont;
/*在底部提示区域显示所选择的样式*/
spanidNode.innerHTML = textfont;
}
</script>
</head>
<body>
<div id="textid">
Good Good Study,Day Day Up!
</div>
<p></p>
<select id="selid" onchange="changeText()">
<option value="none">----text-transform----</option>
<option value="capitalize">首字母大写</option>
<option value="uppercase">全部大写</option>
<option value="lowercase">全部小写</option>
</select>
<p></p>
<div id="fontid">文本格式：<span id="sid"></span></div>
</body>
</html>
