<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf8" /> <link rel="stylesheet" type="text/css" href="/static/demo/html/css/cc.css" /> <script type="text/javascript" src="/static/demo/html/css/cs.js"></script> <script type="text/javascript"> <!-- function test_demo_val(strValue) { var strId="MyDIV" document.getElementById(strId).style.opacity=strValue; document.getElementById("CodeValue").innerHTML=strValue; } //--> </script> <style> #MyDIV { border:1px solid black; background-color:lightblue; width:200px; height:100px; position:relative; left:50px; padding:5px } #DIV2 { border:1px solid black; background-color:yellow; width:200px; height:100px; position:relative; top:80px; left:20px; padding:5px } div#MyDIV { opacity:0.9; } </style> </head> <body> <!--wrapper--> <div id="wrapper"> <div id="SelArea"> <h2>CSS 属性:</h2> <h3>opacity:</h3> <form action="javascript:return false;"> <ul> <input type="hidden" id="PreSelectedValue" value="" /> <li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_1" value="0.9" checked="checked" />0.9</li> <li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_2" value="0.8" />0.8</li> <li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_3" value="0.7" />0.7</li> <li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_4" value="0.6" />0.6</li> <li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_5" value="0.5" />0.5</li> <li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_6" value="0.4" />0.4</li> <li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_7" value="0.3" />0.3</li> <li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_8" value="0.2" />0.2</li> <li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_9" value="0.1" />0.1</li> <li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_10" value="1" />1</li> </ul> </form> </div> <div id="result"> <h2>结果:</h2> <div id="DemoArea"> <div id="DIV2"><br/><br/><br/>一个黄色的 DIV 元素。</div> <div id="MyDIV"><br/><br/><br/>改变 MyDIV 的不透明度。</div> </div> <h2>CSS 代码:</h2> <pre id="CodeArea"> div#MyDIV { opacity:<span id="CodeValue">0.9</span>; } </pre> </div> </div><!--wrapper End--> </body> <script type="text/javascript">tiy_onload()</script> </html>