问题 是否可以创建一个新的css属性?


是否可以在CSS中创建新属性?例如,假设您正在开发一个显示照片的控件,并且您想要向css添加属性以控制照片周围的样式框架。就像是:

#myphoto { frame-style: fancy }

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

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


10361
2018-04-26 08:04


起源

你的例子就像真正的CSS规范:) - galymzhan


答案:


当然,为什么不呢。以此为例进行说明: http://bililite.com/blog/2009/01/16/jquery-css-parser/

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


11
2018-04-26 08:11



jQuery不能做什么? :o - BoltClock♦
显然,它无法阻止我在荒谬的夜晚睡觉。 - Jordan


你不能。浏览器根据CSS的解释来解释CSS 布局引擎 被编码为这样做。

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

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

或者你可以看看 乔丹的回答


4
2018-04-26 08:06



我很确定这会回答我的问题。我注意到由flex水平提供的分布元素的解决方案缺乏某些期望的行为。空间最接近它,但是如果你希望最外面的元素与容器的距离与每个内部元素彼此相同,那么你似乎运气不好。 - 我打算用自己的javascript编写行为,但如果你说的是真的,那么无论如何都无法实现。 - Musixauce3000


如果您更喜欢不使用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中测试了该解决方案。


1
2017-08-17 00:29