HTML .style 属性是不是与 Safari 浏览器完全兼容？

Posted 2023-04-13

【中文标题】HTML .style 属性是不是与 Safari 浏览器完全兼容？

【英文标题】：Is the HTML .style property fully compatible with Safari browser?HTML .style 属性是否与 Safari 浏览器完全兼容？

【发布时间】：2017-08-17 00:25:25

【问题描述】：

考虑以下 javascript 命令：

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

这适用于 Firefox 和 Chrome，但不适用于 Safari。

这篇关于 .style 属性的文章并不表明 Safari 存在任何问题。 https://developer.mozilla.org/en-US/docs/Web/API/htmlElement/style

HTML .style 属性是否与 Safari 浏览器完全兼容？ （桌面版和 ios 版）。

  
  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>

【问题讨论】：

您能否在功能性堆栈溢出代码片段中为我们重现该问题？之后了解您使用的是哪个版本的 Safari 也会有所帮助。

看看here：这是一个长期且不一致的传统，Safari 将 CSS 样式功能限制在表单元素上，认为交互元素的视觉语言应该与操作系统保持一致

不用担心@JonUleis

如果您使用style.color = '#ec5840'，它可以在 Safari 中使用（并且与 MDN 参考一致）。

***.com/questions/41959814/… 建议与 Safari 不以样式解析字符串有关。我正在尝试找到实际的文档 atm。

【参考方案1】：

根据HTMLElement.style 上的 MDN，以下是有关正确语法的建议：

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

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

【讨论】：

根据 MDN 文档，他当前的语法没有错误：“可以通过将字符串直接分配给样式属性来设置样式（如elt.style = "color: blue;"）”所以问题仍然存在，为什么它不能在 Safari 上运行？

@NelsonYeung 感谢您指出这一点 - 完全错过了那句话。不过，奇怪的是他们没有对此进行扩展。

@NelsonYeung 看起来这句话最初是明确告诉用户“不要将字符串直接分配给样式属性”，直到 2016 年 11 月有人从 Chrome 错误报告中更改了它。显然，这种变化还没有为黄金时段做好准备，因为并非所有浏览器（如 Safari）都支持。差异：developer.mozilla.org/en-US/docs/Web/API/HTMLElement/…

@NelsonYeung 在浏览了页面的历史之后，我已经恢复到不到一年前它符合 W3 规范的状态。感谢您指出这一点！

这是一个美丽的发现！谢谢你，我从没想过搜索更改历史。结果比我想象的更有趣。