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;

            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)