是否可以在CSS中创建新属性?例如,假设您正在开发一个显示照片的控件,并且您想要向css添加属性以控制照片周围的样式框架。就像是:
#myphoto { frame-style: fancy }
有没有办法以跨浏览器兼容的方式执行此操作,您将如何定义样式是否继承?
编辑:这是一个自定义控件 - 你的JS代码将处理样式 - 我不希望浏览器神奇地知道该怎么做。我希望用户能够使用CSS而不是JS来设置控件的样式。
是否可以在CSS中创建新属性?例如,假设您正在开发一个显示照片的控件,并且您想要向css添加属性以控制照片周围的样式框架。就像是:
#myphoto { frame-style: fancy }
有没有办法以跨浏览器兼容的方式执行此操作,您将如何定义样式是否继承?
编辑:这是一个自定义控件 - 你的JS代码将处理样式 - 我不希望浏览器神奇地知道该怎么做。我希望用户能够使用CSS而不是JS来设置控件的样式。
当然,为什么不呢。以此为例进行说明: http://bililite.com/blog/2009/01/16/jquery-css-parser/
您也可以使用CSS类而不是属性来逃避。不确定这是否适用于您正在做的事情。
你不能。浏览器根据CSS的解释来解释CSS 布局引擎 被编码为这样做。
除非您使用了像WebKit或Gecko这样的现有开源引擎,否则添加自定义代码来处理您的自定义CSS并创建一个使用您自定义布局引擎的浏览器。但是,只有您的实现才能理解您的自定义CSS。
重新编辑:这取决于你是否能够以某种方式阅读该风格。通常,浏览器会立即丢弃他们无法识别的任何属性,并且JavaScript通常无法访问CSS,因为CSS代码不是DOM的一部分。
或者你可以看看 乔丹的回答。
如果您更喜欢不使用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中测试了该解决方案。