站長資訊網(wǎng)
javascript中給元素加邊框的方法：1、使用“元素對象.style.border="寬度值 樣式值 顏色值"”語句；2、使用“元素對象.style.cssText="border:寬度值 樣式值 顏色值"”語句。
本教程操作環(huán)境：windows7系統(tǒng)、javascript1.8.5版、Dell G3電腦。
方法1：使用HTML DOM border 屬性
語法：Object.style.border=borderWidth borderStyle borderColor
示例：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" id="remove"> <style> div{ width: 80px; height: 30px; margin: 10px auto; } </style> </head> <body style="text-align:center;"> <p style="font-size: 19px; font-weight: bold;">單擊按鈕給div元素添加邊框</p> <div id="div">div元素</div> <button onClick="Fun()">點擊這里</button> <script> var div = document.getElementById('div'); //獲取div元素對象 function Fun() { div.style.border="1px solid red"; //給div元素對象添加樣式 } </script> </body> </html>
效果圖：
2、使用cssText屬性
cssText 的本質就是設置 HTML 元素的 style 屬性值。
語法：Object.style.cssText="屬性名：屬性值";
示例：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" id="remove"> <style> div{ width: 80px; height: 30px; margin: 10px auto; } </style> </head> <body style="text-align:center;"> <p style="font-size: 19px; font-weight: bold;">單擊按鈕給div元素添加邊框</p> <div id="div">div元素</div> <button onClick="Fun()">點擊這里</button> <script> var div = document.getElementById('div'); //獲取div元素對象 function Fun() { div.style.cssText="border:1px dashed green"; //給div元素對象添加樣式 } </script> </body> </html>
效果圖：
【推薦學習：javascript高級教程】
