HTML DOM borderStyle ÊôÐÔ

HTML DOM Style ¶ÔÏó

¶¨ÒåºÍÓ÷¨

borderStyle ÊôÐÔÔÚÒ»ÐÐÉùÃ÷ÖÐΪËùÓÐËĸöÉèÖûò·µ»Ø±ß¿òÑùʽ¡£

¸ÃÊôÐÔ¿ÉʹÓà 1 µ½ 4 ÖÖÑùʽ¡£

Óï·¨£º

Object.style.borderStyle=style

¿ÉÄܵÄÖµ£º

Öµ ÃèÊö
none ¶¨ÒåÎޱ߿ò¡£
hidden Óë "none" Ïàͬ¡£²»¹ýÓ¦ÓÃÓÚ±íʱ³ýÍ⣬¶ÔÓÚ±í£¬hidden ÓÃÓÚ½â¾ö±ß¿ò³åÍ»¡£
dotted ¶¨Òåµã×´±ß¿ò¡£ÔÚ´ó¶àÊýä¯ÀÀÆ÷ÖгÊÏÖΪʵÏß¡£
dashed ¶¨ÒåÐéÏß¡£ÔÚ´ó¶àÊýä¯ÀÀÆ÷ÖгÊÏÖΪʵÏß¡£
solid ¶¨ÒåʵÏß¡£
double ¶¨ÒåË«Ïß¡£Ë«ÏߵĿí¶ÈµÈÓÚ border-width µÄÖµ¡£
groove ¶¨Òå 3D °¼²Û±ß¿ò¡£ÆäЧ¹ûÈ¡¾öÓÚ border-color µÄÖµ¡£
ridge ¶¨Òå 3D ¢״±ß¿ò¡£ÆäЧ¹ûÈ¡¾öÓÚ border-color µÄÖµ¡£
inset ¶¨Òå 3D inset ±ß¿ò¡£ÆäЧ¹ûÈ¡¾öÓÚ border-color µÄÖµ¡£
outset ¶¨Òå 3D outset ±ß¿ò¡£ÆäЧ¹ûÈ¡¾öÓÚ border-color µÄÖµ¡£

ʵÀý

±¾Àý¸Ä±ä±ß¿òµÄÑùʽ£º

<html>
<head>
<style>
p
{ 
border: thick solid #FF0000
}
</style>

<script type="text/javascript">
function changeBorder()
{
document.getElementById("p1").style.borderStyle="dotted double";
}
</script>

</head>
<body>

<form>
<input type="button" onclick="changeBorder()" 
value="Change paragraph border style" />
</form>

<p id="p1">This is a paragraph</p>

</body>
</html>

HTML DOM Style ¶ÔÏó

VUE