这是在看完视频后自己写的一个小的js代码但是就是达不到预期的效果,希望大家给看看,给点思路!谢谢啦!。
<!DOCTYPE html>
<html>
<head>
<title>js_test7.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<script type="text/javascript">
function change(){
var selNode=document.getElementById("selid");
var value=selNode.options[selNode.selectedIndex].value;
/* alert(value); */
var divNode1=document.getElementById("cssid");
//这里的句话就是不执行,想不明白,就是无法拿到id为textid的东西,不知道原因?
var divNode2=decument.getElementById("textid");
divNode1.style.textTransform=value;
divNode2.innerText="text-transform:"+value+";";
}
</script>
<style type="text/css">
#cssid{
background-colorFFcc00;
height:100px;
width:300px;
}
#textid{
background-colorccFF00;
width:300px
}
</style>
</head>
<body>
<div id="cssid">Good good</div>
<p></p>
<select id="selid" onchange="change()">
<option value="none">----text transform-----</option>
<option value="capitalize">首字母大写</option>
<option value="uppercase">整体大写</option>
<option value="lowercase">整体小写</option>
</select>
<p></p>
<div id="textid">text-transform:none</div>
</body>
</html>
|