jsÔõôÉèÖñ߿ò
ʹÓà javascript ÉèÖÃÔªËر߿òµÄÒªÁ죺»ñÈ¡ÒªÉèÖñ߿òµÄÔªËØ¡£ÉèÖà css ÊôÐÔ£ºborderwidth£º±ß¿ò¿í¶È£¨ÀýÈç ‘1px’£©borderstyle£º±ß¿òÑùʽ£¨ÀýÈç ‘solid’£©bordercolor£º±ß¿òÑÕÉ«£¨ÀýÈç ‘red’£©ÆäËû¿ÉÑ¡ÊôÐÔ£ºborderradius£ºÉèÖñ߿òÔ²½Ç£¨ÀýÈç ‘5px’£©bordercollapse£ººÏ²¢ÏàÁÚÔªËصı߿ò£¨ÀýÈç ‘collapse’£©borderspacing£ºÉèÖÃÏàÁڱ߿òÖ®¼äµÄ¼ä¾à£¨ÀýÈç ‘5px’£©
ÔõÑùʹÓà JavaScript ÉèÖñ߿ò
ÔÚ JavaScript ÖУ¬¿ÉÒÔͨ¹ý CSS ÊôÐÔÀ´ÉèÖÃÔªËصı߿ò¡£ÒÔÏÂÊÇÔõÑùʹÓà JavaScript ÉèÖñ߿ò£º
1. »ñÈ¡ÒªÉèÖñ߿òµÄÔªËØ
Ê×ÏÈ£¬ÄãÐèÒª»ñµÃÒªÔÚÆäÉÏÉèÖñ߿òµÄÔªËØ¡£¿ÉÒÔʹÓÃÒÔÏÂÒªÁìÖ®Ò»£º
const element = document.getElementById('myElement');
µÇ¼ºó¸´ÖÆ
const element = document.querySelector('myElement');
µÇ¼ºó¸´ÖÆ
2. ÉèÖÃ CSS ÊôÐÔ
½ÓÏÂÀ´£¬¿ÉÒÔʹÓÃÒÔÏ style ÊôÐÔÀ´ÉèÖñ߿ò£º
borderWidth: ÉèÖñ߿òµÄ¿í¶È£¨ÀýÈç ‘1px’)
borderStyle: ÉèÖñ߿òµÄÑùʽ£¨ÀýÈç ‘solid’, ‘dashed’)
borderColor: ÉèÖñ߿òµÄÑÕÉ«£¨ÀýÈç ‘red’, ‘#000’)
¿ÉÒÔʹÓÃÒÔÏÂÓï·¨ÉèÖöà¸öÊôÐÔ£º
element.style.borderWidth = '1px'; element.style.borderStyle = 'solid'; element.style.borderColor = 'red';
µÇ¼ºó¸´ÖÆ
3. ÆäËûÊôÐÔ
³ýÁËÒÔÉÏÈý¸öÖ÷ÒªÊôÐÔÍ⣬»¹¿ÉÒÔÉèÖÃÒÔÏÂÊôÐÔÀ´½øÒ»²½×Ô½ç˵±ß¿ò£º
borderRadius: ÉèÖñ߿òµÄÔ²½Ç£¨ÀýÈç ‘5px’)
borderCollapse: ÓÃÓںϲ¢ÏàÁÚÔªËصı߿ò£¨ÀýÈç ‘collapse’)
borderSpacing: ÉèÖÃÏàÁڱ߿òÖ®¼äµÄ¼ä¾à£¨ÀýÈç ‘5px’)
ʾÀý
ÒÔÏÂʾÀýչʾÁËÔõÑùʹÓà JavaScript ÉèÖÃÒ»¸ö 1 ÏñËØ¿í¡¢ÊµÏß¡¢ºìÉ«±ß¿ò£º
const element = document.getElementById('myElement'); element.style.borderWidth = '1px'; element.style.borderStyle = 'solid'; element.style.borderColor = 'red';
µÇ¼ºó¸´ÖÆ
ÒÔÉϾÍÊÇjsÔõôÉèÖñ߿òµÄÏêϸÄÚÈÝ£¬¸ü¶àÇë¹Ø×¢±¾ÍøÄÚÆäËüÏà¹ØÎÄÕ£¡