HTML DOM borderWidth ÊôÐÔ

HTML DOM Style ¶ÔÏó

¶¨ÒåºÍÓ÷¨

borderWidth ÊôÐÔÉèÖÃËùÓÐËĸö±ß¿òµÄ¿í¶È¡£

¸ÃÊôÐÔ¿ÉʹÓà 1 µ½ 4 ¸öÖµ£º

  • Èç¹û¹æ¶¨Ò»¸öÖµ£¬±ÈÈç div {border-width: thick} - ËùÓÐËĸö±ß¿ò¶¼ÊÇ´ÖÏß¡£
  • Èç¹û¹æ¶¨Á½¸öÖµ£¬±ÈÈç div {border-width: thick thin} - ÉÏϱ߿òÊÇ´ÖÏߣ¬¶ø×óÓұ߿òÊÇϸÏß¡£
  • Èç¹û¹æ¶¨Èý¸öÖµ£¬±ÈÈç div {border-width: thick thin medium}- Éϱ߿òÊÇ´ÖÏߣ¬×óÓұ߿òÊÇϸÏߣ¬Ï±߿òÊÇÖÐµÈ (medium) µÄ¿í¶È¡£
  • Èç¹û¹æ¶¨ËĸöÖµ£¬±ÈÈç div {border-width: thick thin medium 10px} - Éϱ߿òÊÇ´ÖÏߣ¬Óұ߿òÊÇϸÏߣ¬Ï±߿òÊÇÖеȵĿí¶È£¬¶ø×ó±ß¿òÊÇ 10px µÄ¿í¶È¡£

Óï·¨£º

Object.style.borderWidth=thin|medium|thick|length

¿ÉÄܵÄÖµ£º

Öµ ÃèÊö
thin ¶¨ÒåϸµÄϱ߿ò¡£
medium ĬÈÏ¡£¶¨ÒåÖеȵÄϱ߿ò¡£
thick ¶¨Òå´ÖµÄϱ߿ò¡£
length ÔÊÐíÄú×Ô¶¨Òåϱ߿òµÄ¿í¶È¡£

ʵÀý

±¾Àý¸Ä±ä±ß¿òµÄ¿í¶È£º

<html>
<head>
<style type="text/css">
p
{
border: thin solid #FF0000
}
</style>
<script type="text/javascript">
function changeBorderWidth()
{
document.getElementById("p1").style.borderWidth="thick thin";
}
</script>
</head>
<body>

<input type="button" onclick="changeBorderWidth()"
value="Change border widths" />

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

</body>
</html>

HTML DOM Style ¶ÔÏó

VUE