Question

是否可以在CSS中创建新属性？例如，假设您正在开发一个显示照片的控件，并且您想要向css添加属性以控制照片周围的样式框架。类似的东西：

#myphoto { frame-style: fancy }

有没有办法以跨浏览器兼容的方式执行此操作，您将如何定义样式是否继承？

编辑：这是一个自定义控件 - 你的JS代码会处理样式 - 我不希望浏览器神奇地知道该怎么做。我希望用户能够使用CSS而不是JS来设置控件的样式。

Answer 1

当然，为什么不呢。以此为例：http://bililite.com/blog/2009/01/16/jquery-css-parser/

您也可以使用CSS类而不是属性。不确定这是否适用于您正在做的事情。

Answer 2

你做不到。浏览器根据layout engines的编码方式解释CSS。

除非您使用像WebKit或Gecko这样的现有开源引擎，否则添加自定义代码来处理您的自定义CSS并创建一个使用您自定义布局引擎的浏览器。但是，只有您的实现才能理解您的自定义CSS。

重新编辑：这取决于你是否能够以某种方式阅读该风格。通常，浏览器会立即丢弃他们无法识别的任何属性，并且JavaScript通常无法访问CSS，因为CSS代码不是DOM的一部分。

或者您可以查看Jordan's answer。

Answer 3

如果您更喜欢不使用JS库的直接JavaScript解决方案，则可以使用background-image的查询字符串在CSS中保留“自定义属性”。

<强> HTML

<div id="foo">hello</div>

<强> CSS

#foo {
   background: url('images/spacer.gif?bar=411');
}

<强>的JavaScript

getCustomCSSProperty('foo', 'bar');

支持JavaScript功能

function getCustomCSSProperty(elId, propName)
{
    var obj = document.getElementById(elId);
    var bi = obj.currentStyle ? obj.currentStyle.backgroundImage : document.defaultView.getComputedStyle(obj, null).getPropertyValue('background-image');
    var biurl = RegExp('url\\(["\\\']?([^"\\\']+)["\\\']?\\)').exec(bi);
    return getParameterByName(propName, biurl[1]);
}

function getParameterByName(name, qs) {
    var match = RegExp('[?&]' + name + '=([^&]*)').exec(qs);
    return match && decodeURIComponent(match[1].replace(/\+/g, ' '));
}

<强>演示： http://jsfiddle.net/t2DYk/1/

<强>说明： http://refactorer.blogspot.com/2011/08/faking-custom-css-properties.html

我已经在IE 5.5-9，Chrome，Firefox，Opera和Safari中测试了该解决方案。

是否可以创建新的css属性？

3 个答案: