YUI3 JavaScript：获取占位符文本的 CSS答案

【问题标题】：YUI3 JavaScript: get CSS for placeholder textYUI3 JavaScript：获取占位符文本的 CSS
【发布时间】：2011-06-28 07:20:46
【问题描述】：

我正在编写一些 JavaScript 来在没有它的浏览器中实现占位符文本。

我已经使用以下样式规则成功地在 Chrome 9 和 Fx 4b11 中设置了占位符文本的样式：

::-webkit-input-placeholder { color: #969696 !important; }
input:-moz-placeholder { color: #969696 !important; }

现在我希望我的 JavaScript 从不理解这些规则的浏览器的样式表中检索这些数据，以便我可以手动设置占位符文本的样式。

有谁知道我如何在 YUI3 中做到这一点？我试过了：

YUI().use('node',function(Y) {
    var phColor = Y.all('::-webkit-input-placeholder').getStyle('color');
});

不幸的是，这只是返回： "未定义：未绑定到任何节点 { _query="input::-webkit-input-placeholder", _nodes=}"

有人知道我该怎么做吗？或者如果可能的话？

【问题讨论】：

所以我意识到所有浏览器中的原生 CSS 对象只显示浏览器理解的规则，因此找到“::-webkit-input-placeholder”认为不支持浏览器的对象是不可能的。据我所知，唯一的方法是直接使用 JSCSSP 之类的东西解析 CSS，然后在生成的对象模型中搜索所需的 CSS 规则。我可能会写一个 YUI3 模块来做到这一点。

【解决方案1】：

如果您不是专门使用 YUI（或者愿意从插件中获取 jQuery 代码并将其转换为 YUI3 模块），那么这个 jQuery 插件正是您想要做的：https://github.com/mathiasbynens/Placeholder-jQuery-Plugin

我在生产环境中使用过它，它甚至可以追溯到 IE6 :)

【讨论】：

不，它没有。我已经编写了通用占位符复制器代码。我要解决的问题是使用::-webkit-input-placeholder 或:-moz-placeholder 来设置样式。这个插件不这样做。它所做的是将class="placeholder" 添加到带有占位符的元素中，以便它们可以轻松设置样式，这是一个很好的替代解决方案。我会投票给你，因为这很有帮助，但这实际上并不能回答问题。
啊我的错，我误会了。希望我链接的插件可以提供一个可接受的替代方案。理想情况下，仅使用 CSS 设置 HTML5 占位符的样式会很好，所以如果您找到允许这样做的解决方案，我会很感兴趣:)
我接受这个，因为我认为没有解决方案，这是我最接近的解决方案。