js--函数初探

来源：互联网发布：部落冲突毒药升级数据编辑：程序博客网时间：2024/06/04 19:41

对div变高、变宽、变色的运用

方法一

<!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>无标题文档</title><style>#div1{width:100px;height:100px;background-color:#33CC66;}</style></head><body><input type="button" onclick="toHeight()"value="变高"/><input type="button" onclick="toWidth()" value="变宽"/><input type="button" onclick="toColor()" value="变色"/><div id="div1"></div><script>var oDiv=document.getElementById("div1");function toHeight(){oDiv.style.height="200px";}function toWidth(){oDiv.style.width="200px";}function toColor(){oDiv.style.background="blue";}</script></body></html>

方法二--函数运用

<!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>无标题文档</title><style>#div1{width:100px;height:100px;background-color:#33CC66;}</style></head><body><input type="button" onclick="toChange('height','200px')" value="变高"/><input type="button" onclick="toChange('width','200px')" value="变宽"/><input type="button" onclick="toChange('background','red')" value="变色"/><div id="div1"></div><script>var oDiv=document.getElementById("div1");function toChange(value,elem){oDiv.style[value]=elem;}</script></body></html>

阅读全文

0 0