Главная » Языки программирования

Javascript border style width

Содержание
  1. Style borderWidth Property
  2. Definition and Usage
  3. Browser Support
  4. Syntax
  5. Property Values
  6. Technical Details
  7. More Examples
  8. Example
  9. Example
  10. Example
  11. Related Pages
  12. COLOR PICKER
  13. HOW TO
  14. SHARE
  15. CERTIFICATES
  16. Report Error
  17. Thank You For Helping Us!
  18. Top Tutorials
  19. Top References
  20. Top Examples
  21. Web Certificates
  22. Style borderWidth Property
  23. Browser Support
  24. Syntax
  25. Property Values
  26. Technical Details
  27. More Examples
  28. Example
  29. Example
  30. Example
  31. How to Change Border Width of HTML Element in JavaScript?
  32. JavaScript – Change the Border Width of HTML Element
  33. Conclusion
  34. Related Tutorials
  35. Style border Property
  36. Browser Support
  37. Syntax
  38. Property Values
  39. Technical Details
  40. More Examples
  41. Example
  42. Example
  43. Related Pages
  44. W3SCHOOLS EXAMS
  45. COLOR PICKER
  46. LEARN MORE:
  47. SHARE THIS PAGE
  48. Your Suggestion:
  49. Thank You For Helping Us!
  50. Top 10 Tutorials
  51. Top 10 References
  52. Top 10 Examples
  53. Web Certificates
  54. Javascript Reference — HTML DOM Style borderWidth Property
  55. Browser Support
  56. Syntax
  57. Property Values
  58. Technical Details
  59. Example
  60. Example 2
  61. Example 3
  62. Example 4

Style borderWidth Property

Change the width of the four borders of a element:

Definition and Usage

The borderWidth property sets or returns the width of an element’s border.

This property can take from one to four values:

  • One value, like: p — all four borders will be thick
  • Two values, like: p — the top and bottom border will be thick, left and right border will be thin
  • Three values, like: p — the top border will be thick, left and right border will be thin, bottom border will be medium
  • Four values, like: p — the top border will be thick, right border will be thin, bottom border will be medium, left border will be 10px
Читайте также:  String regular expression in php

Browser Support

Syntax

Return the borderWidth property:

Set the borderWidth property:

Property Values

Value Description
thin Defines a thin border
medium Defines a medium border. This is default
thick Defines a thick border
length The width of the border in length units
initial Sets this property to its default value. Read about initial
inherit Inherits this property from its parent element. Read about inherit

Technical Details

Default Value: medium
Return Value: A String, representing the width of an element’s border
CSS Version CSS1

More Examples

Example

Change the width of the top and bottom border to thick, and the left and right border to thin of a element:

Example

Change the width of the four borders of a element, using the length value:

Example

Return the width of the border of a element:

COLOR PICKER

HOW TO

SHARE

CERTIFICATES

Report Error

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

Thank You For Helping Us!

Your message has been sent to W3Schools.

Top Tutorials

Top References

Top Examples

Web Certificates

W3Schools is optimized for learning, testing, and training. Examples might be simplified to improve reading and basic understanding. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using this site, you agree to have read and accepted our terms of use, cookie and privacy policy. Copyright 1999-2020 by Refsnes Data. All Rights Reserved.
Powered by W3.CSS.

Источник

Style borderWidth Property

The borderWidth property sets or returns the width of an element’s border.

This property can take from one to four values:

  • One value, like: p — all four borders will be thick
  • Two values, like: p — the top and bottom border will be thick, left and right border will be thin
  • Three values, like: p — the top border will be thick, left and right border will be thin, bottom border will be medium
  • Four values, like: p — the top border will be thick, right border will be thin, bottom border will be medium, left border will be 10px

Browser Support

The borderWidth property is supported in all major browsers.

Syntax

Return the borderWidth property:

Set the borderWidth property:

Property Values

Value Description
thin Defines a thin border
medium Defines a medium border. This is default
thick Defines a thick border
length The width of the border in length units
initial Sets this property to its default value. Read about initial
inherit Inherits this property from its parent element. Read about inherit

Technical Details

Default Value: medium
Return Value: A String, representing the width of an element’s border
CSS Version CSS1

More Examples

Example

Change the width of the top and bottom border to thick, and the left and right border to thin of a element:

Example

Change the width of the four borders of a element, using the length value:

Example

Return the width of the border of a element:

Источник

How to Change Border Width of HTML Element in JavaScript?

JavaScript – Change the Border Width of HTML Element

To change the border width of a HTML Element using JavaScript, get reference to the element, and assign required width value to the element.style.borderWidth property.

In the following example, we will change the border width of HTML Element with id «myElement» to «5px» , in JavaScript, using element.style.borderWidth property.

example.html

Conclusion

In this JavaScript Tutorial, we learned how to change the border width of a HTML Element using JavaScript.

  • How to Change Border Color of HTML Element in JavaScript?
  • How to Change Border Radius of HTML Element in JavaScript?
  • How to Change Border Style of HTML Element in JavaScript?
  • How to Change Bottom Border of HTML Element in JavaScript?
  • How to Change Font Color of HTML Element in JavaScript?
  • How to Change Font Family of HTML Element in JavaScript?
  • How to Change Font Size of HTML Element in JavaScript?
  • How to Change Font Weight of HTML Element in JavaScript?
  • How to Change Height of HTML Element in JavaScript?
  • How to Change Left Border of HTML Element in JavaScript?
  • How to Change Margin of HTML Element in JavaScript?
  • How to Change Opacity of HTML Element in JavaScript?
  • How to Change Padding of HTML Element in JavaScript?
  • How to Change Right Border of HTML Element in JavaScript?
  • How to Change Text in HTML Element to Bold in JavaScript?
  • How to Change Text in HTML Element to Italic in JavaScript?
  • How to Change Top Border of HTML Element in JavaScript?
  • How to Change Width of HTML Element in JavaScript?
  • How to Change the Background Color of HTML Element in JavaScript?
  • How to Change the Border of HTML Element in JavaScript?
  • How to Clear Inline Style of HTML Element in JavaScript?
  • How to Get Children of an HTML Element in JavaScript?
  • How to Get Class Names of an HTML Element as List in JavaScript?
  • How to Get Class Names of an HTML Element as String in JavaScript?
  • How to Get First Child of an HTML Element in JavaScript?
  • How to Get Height of an HTML Element in JavaScript?
  • How to Get Last Child of an HTML Element in JavaScript?
  • How to Get Next Sibling of an HTML Element in JavaScript?
  • How to Get Previous Sibling of an HTML Element in JavaScript?
  • How to Get Width of an HTML Element in JavaScript?
  • How to Hide HTML Element in JavaScript?
  • How to Insert Element in Document after Specific HTML Element using JavaScript?
  • How to Iterate over Children of HTML Element in JavaScript?
  • How to Tag Name of an HTML Element in JavaScript?
  • How to Underline Text in HTML Element in JavaScript?
  • How to get Attributes of HTML Element Element in JavaScript?
  • How to get Number of Child Elements of this HTML Element in JavaScript?
  • JavaScript – Change Style of HTML Element

Источник

Style border Property

The border property sets or returns up to three separate border properties, in a shorthand form.

With this property, you can set/return one or more of the following (in any order):

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Property
border 1.0 4.0 1.0 1.0 3.5

Syntax

Return the border property:

Property Values

Parameter Description
width Sets the width of the borders
style Sets the style of the borders
color Sets the color of the borders
initial Sets this property to its default value. Read about initial
inherit Inherits this property from its parent element. Read about inherit

Technical Details

Default Value: not specified
Return Value: A String, representing the border width, style and/or color of an element
CSS Version CSS1

More Examples

Example

Change the width, style and color of the border of a element:

Example

Return the border property values of a element:

W3SCHOOLS EXAMS

COLOR PICKER

LEARN MORE:

SHARE THIS PAGE

Your Suggestion:

Thank You For Helping Us!

Your message has been sent to W3Schools.

Top 10 Tutorials

Top 10 References

Top 10 Examples

Web Certificates

W3Schools is optimized for learning, testing, and training. Examples might be simplified to improve reading and basic understanding. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using this site, you agree to have read and accepted our terms of use, cookie and privacy policy. Copyright 1999-2016 by Refsnes Data. All Rights Reserved.
Powered by W3.CSS.

Источник

Javascript Reference — HTML DOM Style borderWidth Property

The borderWidth property sets or gets the width of an element’s border.

border-width can have one to four values.

border-width:thin medium thick 10px;

  • top border is thin
  • right border is medium
  • bottom border is thick
  • left border is 10px

border-width:thin medium thick;

is equal to all four borders are thin.

Browser Support

borderWidth Yes Yes Yes Yes Yes

Syntax

Return the borderWidth property:

var v = objectstyle.borderWidth

Set the borderWidth property:

object.style.borderWidth='thin|medium|thick|length|initial|inherit'

Property Values

Value Description
thin thin border
medium medium border. Default
thick thick border
length Set the thickness of the border
inherit Inherit the border width from the parent element

Technical Details

Default Value: medium
Return Value: A string representing the width of an element’s border
CSS Version CSS1

Example

The following code shows how to change the width of the four borders of a element

 !DOCTYPE html> html> head> style> #myDiv !-- www .ja v a 2 s . co m--> border-style: solid; >  body> div >"myDiv">This is a div element. button type="button" onclick="myFunction()">test script> function myFunction() < document.getElementById("myDiv").style.borderWidth = "thick"; >

The code above is rendered as follows:

Example 2

The following code shows how to change the width of the top and bottom border to thick, and the left and right border to thin of a element.

 !DOCTYPE html> html> head> style> #myDiv !-- ww w. j a v a 2 s .co m--> border-style: solid; >  body> div >"myDiv">This is a div element. button type="button" onclick="myFunction()">test script> function myFunction() < document.getElementById("myDiv").style.borderWidth = "thick thin"; >

The code above is rendered as follows:

Example 3

The following code shows how to change the width of the four borders of a element, using the length value.

 !DOCTYPE html> html> head> style> #myDiv !-- ww w .ja v a2s .c o m--> border-style: solid; >  body> div >"myDiv">This is a div element. button type="button" onclick="myFunction()">test script> function myFunction() < document.getElementById("myDiv").style.borderWidth = "1px 5px 10px 20px"; >

The code above is rendered as follows:

Example 4

The following code shows how to get the width of the border of a element.

 !DOCTYPE html> html> body> !--from ww w .j ava 2 s . co m--> div >"myDiv" style="border:1px solid black">This is a div element. br> button type="button" onclick="myFunction()">test script> function myFunction() < console.log(document.getElementById("myDiv").style.borderWidth); >

The code above is rendered as follows:

java2s.com | © Demo Source and Support. All rights reserved.

Источник

Оцените статью
© 2024 Программирование