Manipulating strings within strings with JavaScript

Question

Manipulating strings within strings with JavaScript

It's been a strange discovery I made while working with JavaScript. Whenever I try to assign a two-word string to a CSS property, like setting the fontFamily property of an HTML element to "Arial Black", it ends up looking something like this:

"\"Arial Black\""

. This behavior seems really odd and I can't figure out why it happens.

This is the code snippet that showcases this behavior:

element.style.fontFamily = "Arial Black"
>> "Arial Black"
element.style.fontFamily
>> "\"Arial Black\""

Does anyone have any insights or explanations for this unexpected behavior?

Thank you for your time.

javascript css string

Answer 1

Answer №1

It is important to quote font family names that contain whitespace. When you retrieve them, your browser automatically adds the necessary quotes. This can be seen in action in the following example:

var one = document.getElementById("one");
one.style.fontFamily = "Helvetica";
console.log(one.style.fontFamily);
var two = document.getElementById("two");
two.style.fontFamily = "name with spaces";
console.log(two.style.fontFamily);

<div id="one"></div>
<div id="two"></div>

Answer 2

It is important to quote font family names that contain whitespace. When you retrieve them, your browser automatically adds the necessary quotes. This can be seen in action in the following example:

var one = document.getElementById("one");
one.style.fontFamily = "Helvetica";
console.log(one.style.fontFamily);
var two = document.getElementById("two");
two.style.fontFamily = "name with spaces";
console.log(two.style.fontFamily);

<div id="one"></div>
<div id="two"></div>

Manipulating strings within strings with JavaScript

Answer №1

Similar questions

An unexpected error has occurred: Uncaught promise rejection with the following message: Assertion error detected - The type provided is not a ComponentType and does not contain the 'ɵcmp' property

How do I incorporate a standalone checkbox in a React Material-UI table without affecting row selection upon clicking?

The attempted creation of the ui.tree module failed with the error: [$injector:nomod] Unable to find module 'moduleName'! This could be due to a misspelling of the module name or

Ongoing state configuration in a React hook

Issue: A file that has been uploaded completely ignores the req.on() method in NodeJS

Using jQuery and Bootstrap in an ASP.NET Core project

Having trouble viewing the header in devtools for $http requests?

Can a file be successfully retrieved using an HTTP POST request?

Prevent identical values from being added repeatedly to a table while updating in real-time

The chosen element contains a value of -1

What adjustments can be made to the Bootstrap code to prevent it from causing layout issues with the Signin Form and Footer?

The iFrame is set to a standard width of 300 pixels, with no specific styling to dictate the size

Tips for utilizing the font-family style to span multiple columns

Searching for partial nodes

Is there a way to enable scrolling in the background when a modal is open?

Tips on using Jquery to animate an element to a specific pixel measurement

Encountering Error: When Running the Command "npm run dev" it's Showing "missing script: dev" Message

Can preloading data from a website impact the accuracy of my google analytics data?

Executing an xajax/ javascript function simultaneously

Extract the td elements from a table with specific class using the DataTable plugin