<!DOCTYPE html> <html> <head> <title>this is javascript</title> <style type="text/css"> #div1{background: aqua; height:200px; width:200px; } </style> <script type="text/javascript"> function setcolor(color){ var node=document.getElementById(‘div1‘); node.style.background=color; } setcolor(‘green‘); setcolor(‘red‘); setcolor(‘black‘); </script> </head> <body> <input type="button" value="变绿" onclick="setcolor(‘green‘)"> <input type="button" value="变红" onclick="setcolor(‘red‘)"> <input type="button" value="变黑" onclick="setcolor(‘black‘)"> <div id="div1"></div> </body> </html>
//比较一下两段代码示例
<!DOCTYPE html> <html> <head> <title>this is javascript</title> <script type="text/javascript"> function toGreen(){ var node=document.getElementById(‘div1‘); node.style.background="green"; } function toRed(){ var node=document.getElementById(‘div1‘); node.style.background="red"; } function toBlack(){ var node=document.getElementById(‘div1‘); node.style.background="black"; } </script> <style type="text/css"> #div1{width:200px; height:200px; background: red; } </style> </head> <body> <input type="button" value="变绿" onclick="toGreen()"> <input type="button" value="变红" onclick="toRed()"> <input type="button" value="变黑" onclick="toBlack()"> <div id="div1"></div> </body> </html>
<!DOCTYPE html> <html> <head> <title>this is javascript</title> <style type="text/css"> #div1{width:200px; height:200px; background: red; } </style> <script type="text/javascript"> function totype(name,value){ var node=document.getElementById(‘div1‘); node.style[name]=value; } totype(‘width‘,‘300px‘); totype(‘height‘,‘400px‘); totype(‘background‘,‘aqua‘); </script> </head> <body> <input type="button" value="变宽" onclick="totype(‘width‘,‘300px‘)"> <input type="button" value="变高" onclick="totype(‘height‘,‘400px‘)"> <input type="button" value="变蓝" onclick="totype(‘background‘,‘aqua‘)"> <div id="div1"></div> </body> </html>
时间: 2024-10-17 05:25:04