标签：
在使用HTML制作web页面的过程中，很多时候需要动态的去改变控件的属性，这就需要通过调用JavaScript脚本来实现。下面介绍了本人使用过的一些示例代码。
1.语法：
document.getElementById(id).attribute=new value
2.说明：
id 控件的ID attribute 控件的HTML属性 new value 新的属性值
3.示例代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>JavaScript改变控件HTML属性</title> </head> <body> <p id="txt" align="center"><b>文字</b></p> <script> // 函数功能：改变控件的align属性值 // // 参数： elem_id 控件的ID // alia_value 属性值 function txt_alig(elem_id,alig_value) { document.getElementById(elem_id).align=alig_value; //关键代码 } </script> <div align="center"> <input type="button" value="左边" onClick="txt_alig(‘txt‘,‘left‘)"> <input type="button" value="中间" onClick="txt_alig(‘txt‘,‘center‘)"> <input type="button" value="右边" onClick="txt_alig(‘txt‘,‘right‘)"> </div> </body> </html>
1.语法
document.getElementById(id).style.property=new style
2.说明
利用JavaScript改变控件CSS属性与改变HTML属性的区别在于属性的前面要加一个style。
id 控件的ID property 控件的CSS属性 new value 新的属性值
3.示例代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>利用JavaScript改变控件的CSS属性</title> </head> <style type="text/css"> #color_box{ background-color:#0F0; width:100px; height:100px; margin-left:auto; margin-right:auto; margin-top:200px; } </style> <body> <div id="color_box" align="center"></div> <script language="javascript"> function change_color(colo) { document.getElementById("color_box").style.backgroundColor=colo; } </script> <div align="center"> <input type="button" value="红" onclick="change_color(‘#FF0000‘)" /> <input type="button" value="绿" onclick="change_color(‘#00FF00‘)" /> <input type="button" value="蓝" onclick="change_color(‘#0000FF‘)" /> </div> </body> </html>
标签：
原文地址：http://www.cnblogs.com/robothy/p/4604209.html
