Style outlineWidth 属性

课程表

JS 参考手册

JavaScript

Window

HTML DOM

Web API

HTML วัตถุ

</a></li> <li><a href="/th/jsref/dom_obj_time.html" title="HTML DOM Time วัตถุ"><time></a></li> <li><a href="/th/jsref/dom_obj_title.html" title="HTML DOM Title วัตถุ"><title></a></li> <li><a href="/th/jsref/dom_obj_track.html" title="HTML DOM Track วัตถุ"><track></a></li> <li><a href="/th/jsref/dom_obj_u.html" title="HTML DOM Underline วัตถุ"><u></a></li> <li><a href="/th/jsref/dom_obj_ul.html" title="HTML DOM Ul วัตถุ"><ul></a></li> <li><a href="/th/jsref/dom_obj_var.html" title="HTML DOM Variable วัตถุ"><var></a></li> <li><a href="/th/jsref/dom_obj_video.html" title="HTML DOM Video วัตถุ"><video></a></li> </ul> <h2>其他参考手册</h2> <ul> <li><a href="/th/jsref/obj_cssstyledeclaration.html" title="CSSStyleDeclaration วัตถุ">CSSStyleDeclaration</a></li> <li><a href="/th/jsref/jsref_type_conversion.html" title="JavaScript ปรับแปลงประเภท">JS 类型转换</a></li> </ul> </div> <div><h3><center> 选修课 </center><h3> <h2>课程推荐：</h2> <ul> <li><a href="/th/howto/index.html" title="CodeW3C.com คลังมอบเมือง">CodeW3C.com คลังมอบเมือง</a></li> </ul> </div> </div> <div id="maincontent"> <div class="idea"> <a href="/"><button>English</button></a> <a href="/zh/"><button>中文</button></a> <a href="/oldzh/"><button>繁體中文</button></a> <a href="/ru/"><button>Русский</button></a> <a href="/fr/"><button>Français</button></a> <a href="/de/"><button>Deutsch</button></a> <a href="/es/"><button>Español</button></a> <a href="/pt/"><button>Português</button></a> <a href="/ja/"><button>日本語</button></a> <a href="/ko/"><button>한국어</button></a> <a href="/it/"><button>Italiano</button></a> <a href="/ar/"><button>عربي</button></a> <a href="/hi/"><button>हिंदी</button></a> <a href="/bn/"><button>বাংলা</button></a> <a href="/ms/"><button>Bahasa Malaysia</button></a> <a href="/my/"><button>မြန်မာ</button></a> <a href="/vi/"><button>Tiếng Việt</button></a> <a href="/th/"><button>ภาษาไทย</button></a> <a href="/lo/"><button>ລາວ</button></a> <a href="/id/"><button>Bahasa Indonesia</button></a> <a href="/ur/"><button>اردو</button></a> <a href="/ha/"><button>Hausa</button></a> <a href="/pl/"><button>Język polski</button></a> <a href="/pa/"><button>ਪੰਜਾਬੀ</button></a> <a href="/sv/"><button>Svenska</button></a> <a href="/da/"><button>Dansk</button></a> <a href="/nl/"><button>Nederlands</button></a> <a href="/tr/"><button>Türkçe</button></a> <a href="/fi/"><button>suom.</button></a> <a href="/el/"><button>Ελληνικά</button></a> <a href="/fa/"><button>فارسی</button></a> <a href="/sw/"><button>Kiswahili</button></a> <a href="/te/"><button>తెలుగు</button></a> <a href="/tl/"><button>wikang Galu</button></a> </div> <h1>Style outlineWidth 属性</h1> <div class="prenextnav-ref"> <ul> <li> หน้าก่อนหน้า <a href="/th/jsref/prop_style_outlinestyle.html" title="Style outlineStyle นิยาม">outlineStyle</a></li> <li> หน้าต่อไป <a href="/th/jsref/prop_style_overflow.html" title="Style overflow นิยาม">overflow</a></li> <li> กลับไปยังเพศกำลังเดิม <a href="/th/jsref/dom_obj_style.html" title="HTML DOM Style 对象">HTML DOM Style 对象</a></li> </ul> </div> <div> <h2>定义和用法</h2> <p><code>outlineWidth</code> 属性设置或返回元素周围轮廓的宽度。</p> <p>轮廓是围绕元素的一条线。它显示在元素的外边距周围。但是，它与边框属性不同。</p> <p>เส้นรอบตัวไม่เป็นส่วนหนึ่งของขนาดขององค์ประกอบ ดังนั้นความกว้างและความสูงขององค์ประกอบจะไม่มีความกว้างของเส้นรอบตัวเป็นส่วนหนึ่ง</p> <h3>ดูเพิ่มเติม:</h3> <p>คู่มือ CSS:<a href="/th/css/css_outline.html" title="CSS รอยลักษณ์">CSS รอยลักษณ์</a></p> <p>คู่มือ CSS:<a href="/th/cssref/pr_outline-width.html" title="CSS outline นิยาม">คุณสมบัติ outline</a></p> <p>คู่มือ HTML DOM:<a href="/th/jsref/prop_style_outline.html" title="Style outline นิยาม">คุณสมบัติ outline</a></p> </div> <div> <h2>ตัวอย่าง</h2> <h3>ตัวอย่าง 1</h3> <p>แก้ไขความกว้างของเส้นรอบตัว <div> องค์ประกอบ:</p> <pre class="language-js"> document.getElementById("myDiv").style.outlineWidth = "10px"; </pre> <p class="tiy"><a target="_blank" href="/th/tiy/t.html?f=jsck_style_outlinewidth_1">ลองทดลองเอง</a></p> <h3>ตัวอย่าง 2</h3> <p>แก้ไขความกว้างของเส้นรอบตัว <div> องค์ประกอบด้วยค่า "thick":</p> <pre class="language-js"> document.getElementById("myDiv").style.outlineWidth = "thick"; </pre> <p class="tiy"><a target="_blank" href="/th/tiy/t.html?f=jsck_style_outlinewidth_2">ลองทดลองเอง</a></p> <h3>ตัวอย่าง 3</h3> <p>ส่งผลกลับความกว้างของเส้นรอบตัว <div> องค์ประกอบ:</p> <pre class="language-js"> alert(document.getElementById("myDiv").style.outlineWidth); </pre> <p class="tiy"><a target="_blank" href="/th/tiy/t.html?f=jsck_style_outlinewidth_3">ลองทดลองเอง</a></p> </div> <div> <h2>เขียนโค้ด</h2> <p>ส่งผลกลับคุณสมบัติ outlineWidth:</p> <pre><i>object</i>.style.outlineWidth</pre> <p>ตั้งค่าคุณสมบัติ outlineWidth:</p> <pre><i>object</i>.style.outlineWidth = "thin|medium|thick|<i>length</i>|initial|inherit"</pre> <h3>ค่าของคุณสมบัติ</h3> <table class="dataintable"> <tr> <th style="width: 25%;">ค่า</th> <th>คำอธิบาย</th> </tr> <tr> <td>thin</td> <td>กำหนดเส้นรอบตัวแบบเล็ก</td> </tr> <tr> <td>medium</td> <td>กำหนดเส้นรอบตัวปานกลาง ปริยาย</td> </tr> <tr> <td>thick</td> <td>กำหนดเส้นรอบตัวหนา</td> </tr> <tr> <td><i>length</i></td> <td>ความกว้างของเส้นรอบตัวที่นับด้วยหน่วยความยาว。</td> </tr> <tr> <td>initial</td> <td>ตั้งค่าคุณสมบัตินี้เป็นค่าปริยายของเธอ โปรดดู <a href="/th/cssref/css_initial.html" title="CSS initial คำสำคัญ">initial</a>。</td> </tr> <tr> <td>inherit</td> <td>ทำให้คุณได้รับคุณสมบัตินี้จากตัวปลอมของเธอโดยตรง โปรดดู <a href="/th/cssref/css_inherit.html" title="CSS inherit คำสำคัญ">inherit</a>。</td> </tr> </table> </div> <div> <h2>รายละเอียดเทคนิค</h2> <table class="definition-usage"> <tr> <th style="width: 25%;">ค่าปริยาย:</th> <td>medium</td> </tr> <tr> <th>ค่าที่ส่งผลกลับ:</th> <td>ข้อความแบบ String ที่แสดงความกว้างของเส้นรอบตัวองค์ประกอบ。</td> </tr> <tr> <th>CSS รุ่น:</th> <td>CSS2</td> </tr> </table> </div> <div> <h2>การสนับสนุนโดยเบราเซอร์</h2> <table class="browser-support"> <tr> <th class="bsChrome">Chrome</th> <th class="bsEdge">Edge</th> <th class="bsFirefox">Firefox</th> <th class="bsSafari">Safari</th> <th class="bsOpera">Opera</th> </tr> <tr> <td>Chrome</td> <td>Edge</td> <td>Firefox</td> <td>Safari</td> <td>Opera</td> </tr> <tr> <td>สนับสนุน</td> <td>สนับสนุน</td> <td>สนับสนุน</td> <td>สนับสนุน</td> <td>สนับสนุน</td> </tr> </table> </div> <div class="prenextnav-ref"> <ul> <li> หน้าก่อนหน้า <a href="/th/jsref/prop_style_outlinestyle.html" title="Style outlineStyle นิยาม">outlineStyle</a></li> <li> หน้าต่อไป <a href="/th/jsref/prop_style_overflow.html" title="Style overflow นิยาม">overflow</a></li> <li> กลับไปยังเพศกำลังเดิม <a href="/th/jsref/dom_obj_style.html" title="HTML DOM Style 对象">HTML DOM Style 对象</a></li> </ul> </div><div style="background-color:#fcfdf8; padding:0;"> </div> </div>  <div id="sidebar"> <div><h3><center> มีทางเลือก </center><h3> <h5 id="tools_reference"><a href="/th/jsref/index.html">คู่มืออ้างอิง JavaScript และ HTML DOM</a></h5> <h5 id="tools_example"><a href="/th/js/js_examples.html">ตัวอย่าง JavaScript</a></h5> <h5 id="tools_quiz"><a href="/th/js/js_quiz.html">การทดสอบ JavaScript</a></h5> <h5 id="tools_tutorial"><a href="/th/js/index.html">คู่มือ JavaScript</a></h5> </div> <div><h3><center> ลิงก์ผู้สนับสนุน </center><h3> <div id="sbtg"> <script src="/myjs/zzsr.js"></script> </div> </div> </div> <div id="footer"> <p id="p1"> เนื้อหาที่ CodeW3C.com มอบมอบมาใช้เพื่อการฝึกและการทดสอบเท่านั้น ไม่มีการประกันถึงความถูกต้องของเนื้อหา ภาวะที่เกิดขึ้นจากการใช้เนื้อหาของเว็บไซต์นี้ไม่มีส่วนเกี่ยวข้องกับเว็บไซต์นี้ สิทธิ์บังคับบัญญัติและสิทธิ์ทั้งหมดถือโดยเจ้าของสิทธิ์บังคับบัญญัติและเก็บรักษาทั้งหมด </p> <p id="p2"> <a href="/th/about/index.html" title="เกี่ยวกับ CodeW3C.com">เกี่ยวกับ CodeW3C.com</a> <a href="/th/about/about_helping.html" title="ช่วยเหลือ CodeW3C.com">ช่วยเหลือ CodeW3C.com</a> <a href="/th/about/about_use.html" title="เกี่ยวกับการใช้งาน">ข้อกำหนดการใช้งาน</a> <a href="/th/about/about_privacy.html" title="เกี่ยวกับความเป็นส่วนตัว">ข้อกำหนดความเป็นส่วนตัว</a> <a href="http://www.comfortsoftwaregroup.com/" target="_blank"><img src="/comfortsoftwaregroup.png"></a> <a href="http://www.ce4e.com/" target="_blank"><img src="/poweredby.png" alt="จาก Ce4e.com"></a> </p> </div> </div>  <script src="/myjs/tongji.js"></script> </body> </html>