Font family javascript style

How to Change Font Family of HTML Element in JavaScript?

JavaScript – Change the Font Family of HTML Element

To change the font family of a HTML Element using JavaScript, get reference to the element, and assign required font family value to the element.style.fontFamily property.

In the following example, we will change the font family of HTML Element with id «myElement» to «monospace» , in JavaScript, using element.style.fontFamily property.

example.html

Conclusion

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

Related Tutorials

• 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 Border Width 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 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

Свойство style получает и устанавливает инлайновые стили элемента, то есть те, что записываются через HTML-атрибут style .

С помощью него можно управлять стилем элемента. Специфичность этого свойства такая же, как у атрибута style .

Как пишется

Скопировать ссылку «Как пишется» Скопировано

Чтобы получить значения инлайновых стилей с помощью свойства style , мы можем записать:

 const element = document.getElementById('someElement')const inlineStyles = element.style const element = document.getElementById('someElement') const inlineStyles = element.style    Скопировать Скопировано Не удалось скопировать   

В этом случае в значение inline Styles запишется объект CSS Style Declaration , который будет содержать в себе все инлайновые стили элемента element .

Чтобы задать стили для элемента, мы можем использовать несколько способов. Либо через css Text , чтобы указать несколько свойств разом. (Тем же эффектом обладает установка стиля через set Attribute ( ) .) Либо через отдельные свойства в style . [ property Name ] .

Следующие две записи работают одинаково и устанавливают несколько стилей в одном выражении:

 element.style.cssText = 'color: blue; border: 1px solid black'element.setAttribute('style', 'color:red; border: 1px solid blue;') element.style.cssText = 'color: blue; border: 1px solid black' element.setAttribute('style', 'color:red; border: 1px solid blue;')    Скопировать Скопировано Не удалось скопировать   

Следующая — устанавливает значение определённого свойства, оставляя другие значения стиля нетронутыми:

 element.style.color = 'blue' element.style.color = 'blue'    Скопировать Скопировано Не удалось скопировать   

Как понять

Скопировать ссылку «Как понять» Скопировано

Свойство style — это механизм для работы со стилями на элементе. С его помощью можно управлять отображением элементов в «рантайме», то есть во время выполнения скрипта.

Этот механизм позволяет «перетирать» стили, описанные в CSS-таблицах, так как специфичность стилей в атрибуте style выше (за исключением стилей с !important ).

Чтобы указать значение конкретного CSS-свойства, мы можем использовать одноимённое отображение в style :

 // Если мы хотим указать color:element.style.color = 'red' // или 'rgb(255,0,0)', или '#f00' // Если хотим указать font-family:element.style.fontFamily = 'Arial' // Если мы хотим указать color: element.style.color = 'red' // или 'rgb(255,0,0)', или '#f00' // Если хотим указать font-family: element.style.fontFamily = 'Arial'    Скопировать Скопировано Не удалось скопировать   

Обратите внимание, что имена свойств в style . [ property Name ] записываются в camelCase, в отличие от CSS-свойств, которые записываются через дефис.

Таким образом font — family превращается в font Family , а, например, background — color — в background Color .

При сомнениях в том, как правильно называется то или иное свойство, воспользуйтесь списком соответствий:

CSS	JavaScript
background	background
background-attachment	backgroundAttachment
background-color	backgroundColor
background-image	backgroundImage
background-position	backgroundPosition
background-repeat	backgroundRepeat
border	border
border-bottom	borderBottom
border-bottom-color	borderBottomColor
border-bottom-style	borderBottomStyle
border-bottom-width	borderBottomWidth
border-color	borderColor
border-left	borderLeft
border-left-color	borderLeftColor
border-left-style	borderLeftStyle
border-left-width	borderLeftWidth
border-right	borderRight
border-right-color	borderRightColor
border-right-style	borderRightStyle
border-right-width	borderRightWidth
border-style	borderStyle
border-top	borderTop
border-top-color	borderTopColor
border-top-style	borderTopStyle
border-top-width	borderTopWidth
border-width	borderWidth
clear	clear
clip	clip
color	color
cursor	cursor
display	display
filter	filter
float	cssFloat
font	font
font-family	fontFamily
font-size	fontSize
font-variant	fontVariant
font-weight	fontWeight
height	height
left	left
letter-spacing	letterSpacing
line-height	lineHeight
list-style	listStyle
list-style-image	listStyleImage
list-style-position	listStylePosition
list-style-type	listStyleType
margin	margin
margin-bottom	marginBottom
margin-left	marginLeft
margin-right	marginRight
margin-top	marginTop
overflow	overflow
padding	padding
padding-bottom	paddingBottom
padding-left	paddingLeft
padding-right	paddingRight
padding-top	paddingTop
page-break-after	pageBreakAfter
page-break-before	pageBreakBefore
position	position
stroke-dasharray	strokeDasharray
stroke-dashoffset	strokeDashoffset
stroke-width	strokeWidth
text-align	textAlign
text-decoration	textDecoration
text-indent	textIndent
text-transform	textTransform
top	top
vertical-align	verticalAlign
visibility	visibility
width	width

На практике

Скопировать ссылку «На практике» Скопировано

Саша Беспоясов советует

Скопировать ссылку «Саша Беспоясов советует» Скопировано

В целом для управления стилями лучше использовать CSS. Можно использовать классы-модификаторы, чтобы придавать какие-то наборы стилей элементу.

Инлайновые стили имеют более высокую специфичность — их труднее переопределить, и это мешает нормальной работе со стилями элемента.

Пример. Мы пишем библиотеку, которая умеет красиво рисовать кнопки. Если мы установим цвет и размер кнопки с помощью инлайновых стилей, то пользователь библиотеки не сможет их легко поменять. Использовать такую библиотеку никто не захочет

Однако есть некоторые случаи, когда манипуляция инлайн-стилями — это ок. Например, если мы хотим управлять отображением элемента точечно, и описывать это в CSS невозможно.

Представьте, что вы хотите сделать анимацию движения точки на экране так, чтобы движение было случайным. В CSS (пока что) этого сделать нельзя, только скриптами. И вот здесь изменение инлайновых стилей как раз кстати.

Для изменения таких стилей используется свойство style .

Используйте style , чтобы изменить или получить инлайновые стили элемента.

🛠 Чтобы переписать стиль элемента полностью, можно использовать css Text или set Attribute .

 element.style.cssText = 'color: blue; border: 1px solid black'element.setAttribute('style', 'color:red; border: 1px solid blue;') element.style.cssText = 'color: blue; border: 1px solid black' element.setAttribute('style', 'color:red; border: 1px solid blue;')    Скопировать Скопировано Не удалось скопировать   

🛠 Чтобы обновить значение конкретного свойства, а остальные оставить нетронутыми, используйте style . [ property Name ] :

 element.style.color = 'red'element.style.fontFamily = 'Arial' element.style.color = 'red' element.style.fontFamily = 'Arial'    Скопировать Скопировано Не удалось скопировать   

🛠 Чтобы сбросить значение, присвойте ему null .

 // Если у элемента прописано style="background-color: red; color: black;",// то такая запись:element.style.backgroundColor = null // . оставит только style="color: black;". // Если у элемента прописано style="background-color: red; color: black;", // то такая запись: element.style.backgroundColor = null // . оставит только style="color: black;".    Скопировать Скопировано Не удалось скопировать   

🛠 Численным свойствам, таким как margin , padding , border — width и другим, следует указывать не только значение, но и единицу измерения:

 element.style.marginTop = '50px' element.style.marginTop = '50px'    Скопировать Скопировано Не удалось скопировать   

Источник

Style fontFamily Property

Tip: Always specify a generic-family name as the last alternative!

Note: Separate each value with a comma.

Note: If a font-family name contains whitespace, it must be quoted.

Tip: Look at Web safe fonts for commonly used font combinations.

Browser Support

Syntax

Return the fontFamily property:

Set the fontFamily property:

Property Values

Value	Description
font1, font2, etc.	A comma-separated list of font-family names and/or generic-family names
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 font name of the text in the element
CSS Version	CSS1

More Examples

Example

A demonstration of possible values:

var listValue = selectTag.options[selectTag.selectedIndex].text;
document.getElementById(«demo»).style.fontFamily = listValue;

Example

Return the font of an element:

Related Pages

COLOR PICKER

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

Get Certified

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Источник