码迷,mamicode.com
首页 > Web开发 > 详细

用js修改css属性

时间:2016-05-15 18:02:59      阅读:244      评论:0      收藏:0      [点我收藏+]

标签:

<!DOCTYPE html> <html> <head lang="en">     <meta charset="UTF-8">     <title></title>     <style>         #fuhao{width: 20px}     </style> </head> <body> <div>     <input type="button" value="按钮1" onclick="a()"/>     <input type="button" value="按钮2" onclick="b()"/>
<div id="div1"></div> </div> <br/><br/><br/> <div> <input type="text" id="num1"/> <input type="text" id="fuhao" /> <input type="text" id="num2"/> <input type="button" value="等于" onclick="calSum()"/> <input type="text" id="num3"/>
</div> <br/><br/><br/> <div> <input type="text" id="d1" placeholder="用户名" onclick="bi()"/> <input type="password" id="d2" placeholder="密码" onclick="bi1()"/> <input type="button" id="d3" value="提交" onclick="bi2()"/> </div> <br/><br/><br/> <div id="div2" onclick="e()"> 打发似的发技能是打发地方开始增加负担发世界的看法速度发货时间留给设计风格和 </div> <br/><br/><br/> <div> <ul> <li onclick="w()" >手机 <ol id="cai" > <li>手机发</li> <li>手机发</li> <li>手机发</li> <li>手机发</li> <li>手机发</li> </ol> </li> <li onclick="w1()" >手机 <ol id="cai1" > <li>手机发</li> <li>手机发</li> <li>手机发</li> <li>手机发</li> <li>手机发</li> </ol> </li>
<li onclick="w2()" >手机 <ol id="cai2"> <li>手机发</li> <li>手机发</li> <li>手机发</li> <li>手机发</li> <li>手机发</li> </ol> </li>
</ul> </div>
</body> <script type="text/javascript"> var a = function () { document.getElementById("div1").innerHTML = "都快放假啊可大幅度发艰苦奋斗安静地方爱回家" } var b = function () { document.getElementById("div1").innerHTML = "" } </script> <script type="text/javascript"> function calSum(){ var c1=parseFloat(document.getElementById("num1").value); var c2=parseFloat(document.getElementById("num2").value); var c=String(document.getElementById("fuhao").value); switch(c){ case"+":document.getElementById("num3").value =(c1+c2);break; case"-":document.getElementById("num3").value =(c1-c2);break; case"*":document.getElementById("num3").value =(c1*c2);break; case"/":document.getElementById("num3").value =(c1/c2);break; case"%":document.getElementById("num3").value =(c1%c2);break; } }
</script> <script type="text/javascript"> function bi(){ // document.getElementById("d1").attributes.removeNamedItem("placeholder"); // document.getElementById("d1").attributes.removeNamedItem("type"); document.getElementById("d1").setAttribute("value","提交"); document.getElementById("d1").setAttribute("type","button") } function bi1(){ // document.getElementById("d2").attributes.removeNamedItem("placeholder"); // document.getElementById("d2").attributes.removeNamedItem("type"); document.getElementById("d2").setAttribute("placeholder","用户名"); document.getElementById("d2").setAttribute("type","text") } function bi2(){ document.getElementById("d3").attributes.removeNamedItem("value"); // document.getElementById("d3").attributes.removeNamedItem("type"); document.getElementById("d3").setAttribute("placeholder","密码"); document.getElementById("d3").setAttribute("type","password") }
</script> <script type="text/javascript"> var g=document.getElementById("div2"); g.style.width="550px"; g.style.height="458px"; g.style.backgroundImage="url(1.jpg)"; g.style.opacity=".5"; g.style.color="red"; g.style.border="1px blue solid";
function e(){ g.style="none"; g.style.width="550px"; g.style.height="100px"; } </script> <script type="text/javascript"> var f=document.getElementById("cai"); var f1=document.getElementById("cai1"); var f2=document.getElementById("cai2"); f.style.display="none"; f1.style.display="none"; f2.style.display="none"; function w() { var ff=f.style.display; if (ff =="none") { f.style.display = "block" } else { f.style.display = "none" } } function w1() { var ff1=f1.style.display; if (ff1=="none") { f1.style.display = "block" } else { f1.style.display = "none" } } function w2() { var ff2 =f2.style.display; if (ff2 =="none") { f2.style.display = "block" } else { f2.style.display = "none" } }


</script>
</html>

用js修改css属性

标签:

原文地址:http://www.cnblogs.com/dugufeiyang/p/5495583.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!