0

Consider the following Javascript command: 

document.getElementsByClassName('phone_label')[0].style = 'color:#ec5840';

This works fine in Firefox and Chrome, but not in Safari.

This article on the .style property does not indicate any issues with Safari. https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style

Is the HTML .style property fully compatible with Safari browser? (Both desktop and iOS versions).

  
  function changecolor() {
    document.getElementsByClassName('phone_label')[0].style = 'color:#ec5840';
    alert('The phone number should change to red!');  
  }
  <p class='phone_label'>0411 111 111</p><br>
  <button onclick='changecolor()'>Click</button>
cleverpaul
  • 935
  • 4
  • 12
  • 28
  • 1
    Can you reproduce the problem in a functional Stack Overflow Code Snippet for us? It'd also help knowing which version of Safari you're using, after that. – Jon Uleis Aug 17 '17 at 00:27
  • Take a look [here](https://stackoverflow.com/questions/15025555/option-style-display-none-not-working-in-safari): This is part of a long and inconsistent tradition with Safari restricting CSS styling functionality on form elements, believing the visual language of interactive elements should be consistent with the OS – Grief Aug 17 '17 at 00:28
  • No worries @JonUleis – cleverpaul Aug 17 '17 at 00:32
  • If you use `style.color = '#ec5840'` it works in Safari (and is consistent with the MDN reference). – RobG Aug 17 '17 at 00:34
  • https://stackoverflow.com/questions/41959814/style-displayblock-works-in-chrome-but-not-safari suggests something to do with Safari not parsing strings in style. I'm trying to find the actual docs atm. – Nelson Yeung Aug 17 '17 at 00:35
  • Thanks @RobG ! That is a really helpful solution. – cleverpaul Aug 17 '17 at 00:37

1 Answers1

1

Per the MDN on HTMLElement.style, here are suggestions for the correct syntax:

document.getElementsByClassName('phone_label')[0].style.cssText = 'color: #ec5840;';

document.getElementsByClassName('phone_label')[0].style.color = '#ec5840';

Jon Uleis
  • 17,693
  • 2
  • 33
  • 42
  • Per the MDN docs, his current syntax is **not** wrong: "Styles can be set by assigning a string directly to the style property (as in `elt.style = "color: blue;"`)" So the question remains, why isn't it working on Safari? – Nelson Yeung Aug 17 '17 at 00:43
  • @NelsonYeung Thank you for pointing that out - completely missed that sentence. Odd how they don't expand upon it, though. – Jon Uleis Aug 17 '17 at 00:46
  • @NelsonYeung Looks like that sentence was originally explicitly telling users "NOT to be assigning a string directly to the style property", until it was changed in November 2016 by someone coming from a Chrome bug report. Clearly this change wasn't ready for primetime, since not all browsers (like Safari) adhere. The diff: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style$compare?to=1140743&from=1133865 – Jon Uleis Aug 17 '17 at 00:52
  • @NelsonYeung After going through the page's history, I've restored that bit to how it was less than a year ago when it was in line with W3 spec. Thanks for pointing that out! – Jon Uleis Aug 17 '17 at 01:01
  • That's a beautiful find! Thanks for this, I never thought about searching for the change history. This turned out more interesting than I thought. – Nelson Yeung Aug 17 '17 at 11:01