您的位置：首页 > Web前端 > JavaScript

javascript学习实录之九（选择样式，改变文字效果） -- 刘小小尘

2013-05-12 21:52 375 查看

直接上代码：

当你选择一个样式的时候，对应的地方，会改变，这会很有用的

代码很简单，欢迎指教

<!DOCTYPE html>
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<head>
    <title></title>
    <style type="text/css">
        #cssid {
            height: 100px;
            width: 300px;
            background-color: #FFCC00;
        }
        #textid {
            background-color: #CCCCCC;
            width: 300px;
        }
    </style>
    <script type="text/javascript">
        function change() {
            var selNode = document.getElementById("selid");
            var value = selNode.options[selNode.selectedIndex].value;

            var didNode1 = document.getElementById("cssid");
            var divNode2 = document.getElementById("textid");
            didNode1.style.textTransform = value;
            divNode2.innerHTML = "text-transform : "+ value + ";";
        }
    </script>
</head>
<body>
    <div id="cssid">
        good good study day day up!!!
    </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>
    <div id="textid">
        text-transform : none;
    </div>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航

javascript学习实录 之九（选择样式，改变文字效果） -- 刘小小尘

javascript学习实录之九（选择样式，改变文字效果） -- 刘小小尘