We're calling on all EU-based Mozillians with iOS or iPadOS devices to help us monitor Apple’s new browser choice screens. Join the effort to hold Big Tech to account!

Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

Javascript command window.getComputedStyle(document.body, ':after').getPropertyValue('content') returns content with extra double quotes

  • 1 reply
  • 2 have this problem
  • 6 views
  • Last reply by cor-el

more options

When I use in my css: body:after { content: "mobile"; display: none; } And check this with javascript with the command: var size = window.getComputedStyle(document.body, ':after').getPropertyValue('content');

I get in firefox (v 23.0.1 mac) returned the string ""mobile"" with doubled quotes as return and therefore the check if size =="mobile" returns false. In safari the value returned "mobile" without the doubles quotes. How come?

When I use in my css: body:after { content: "mobile"; display: none; } And check this with javascript with the command: var size = window.getComputedStyle(document.body, ':after').getPropertyValue('content'); I get in firefox (v 23.0.1 mac) returned the string ""mobile"" with doubled quotes as return and therefore the check if size =="mobile" returns false. In safari the value returned "mobile" without the doubles quotes. How come?

Chosen solution

What you get is a string that represents of what you specified in content.

A content specification can include other things like a counter: body:after { content: "topics[" counter(topics) "]"; }

size = window.getComputedStyle(document.body, ':after').content would give: "topics[" counter(topics) "]"
So you need to test for the exact text of the content: size=='"mobile"';

Read this answer in context 👍 0

All Replies (1)

more options

Chosen Solution

What you get is a string that represents of what you specified in content.

A content specification can include other things like a counter: body:after { content: "topics[" counter(topics) "]"; }

size = window.getComputedStyle(document.body, ':after').content would give: "topics[" counter(topics) "]"
So you need to test for the exact text of the content: size=='"mobile"';