Question

我想创建自己的自定义CSS元素，这些元素将由我的js文件处理。这可能吗？

这是一个例子：

div {
    rounded-corners:15px 15px
}

然后使用Javascript为每个浏览器应用样式以进行四舍五入。

有没有办法做这样的事情？

修改

关键是不要为浏览器添加常见支持。我想实现自己的CSS东西。

Answer 1

答案是“不”。虽然可以通过访问currentStyle属性轻松地从Internet Explorer中的样式表中获取样式值，如下所示：

alert(myDiv.currentStyle['rounded-corners']);
//-> "15px 15px"

...其他浏览器不支持currentStyle属性，而是选择支持W3C标准window.getComputedStyle()。 getComputedStyle()在结果中不包含“expando”样式属性，这意味着您唯一的选择是迭代每个样式表中的规则，这可能是一个昂贵的过程，具体取决于您有多少样式表和规则。显然，你也失去了浏览器的级联/计算。

Answer 2

IE9和最新版本的Firefox和Chrome无论如何都会处理border-radius。

您可以使用CSS3 Pie添加对旧版IE的支持。无需编写自己的脚本。

编辑：我想你可以编写自己的CSS3 Pie版本，但为什么要这样？

Answer 3

您可能需要查看SASS/SCSS或LESS，它们都提供“mixins”。这些就像CSS中的函数一样，应该让你做你想做的事。至少可以通过Javascript使客户端工作;我怀疑SCSS也可以。

Answer 4

CSS已经有一个圆角属性，称为border-radius。

目前使用的几乎所有浏览器都支持此功能。任何重要的唯一例外是IE8及更早版本。

在这种情况下的好消息是，IE8 可以确实被编程为按您要求的方式工作。其他浏览器不能，但IE可以，这很幸运，因为它是比一般浏览器更需要它的浏览器。

因此，对您的问题的直接回答是“有时”。大多数浏览器删除了他们不支持的样式，但IE会保留它们。它显然不会对它们做任何事情，但是你可以通过DOM访问它们，这意味着你可以做你想要的......但只是在IE中。

在圆角的情况下，已经有一个非常好的基于Javascript的黑客，称为CSS3Pie。这是开源的，因此您可以检查它们的源代码以了解它是如何完成的。

CSS3Pie代码虽然相当复杂，但是如果你想要一个更简单的例子，请看看this older script，它更简单地做同样的事情。更容易阅读，但功能不强。对于现实生活使用，使用CSS3Pie，但对于学习，这个是一个更好的起点。

对于使用IE，我建议按照这些脚本中的示例来实现您的要求。对于其他浏览器，你会有更难的时间。

在CSS中添加样式元素

4 个答案: