標籤：cti charset ext 代碼 size 選取器 meta document idt
代碼如下：<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>JS實戰 · 仿css樣式選取器
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
