javascript学习实录 之九(选择样式,改变文字效果) 刘小小尘

直接上代码:

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

代码很简单,欢迎指教

<!DOCTYPE html>
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<head>
    <title></title>
    <style type="text/css">
        #cssid {
            height: 100px;
             300px;
            background-color: #FFCC00;
        }
        #textid {
            background-color: #CCCCCC;
             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>


原文地址:https://www.cnblogs.com/javawebsoa/p/3074857.html