style元素完全解析

解决不同元素的属性相同、让代码更加整洁美观

style元素与layer元素、hotspot元素的style息息相关。

1.19之后,style属性可以存在于其它所有元素中,不仅仅是layer或hotspot,也就是说你可以用style来写其它元素的相同属性的集合。

style元素所包含的内容,相当于这些元素的属性的子集。通常如果我们有很多个热点,或者很多个图片,这些热点或图片的很多属性可能是相同的,例如它们的鼠标行为、它们的尺寸等等。如果我们把这些相同的属性都写在hotspot元素里,我们的代码就会变成这样:

不用说,你肯定看到眼都花了,细心的人同学肯定能发现,其实这三个热点,有好几个属性以及对应的数值是一模一样的,例如url、scale、edge、oy、distored等,style元素就是为此而生,它将相同的属性和属性值写在一个标签内,然后这些共用的hotspot只需要调用同一个style元素就可以了。例如我们把这些相同的属性写在一个style里。

然后我们就可以很轻松地写出三段非常简练的hotspot代码:

我们可以看到所有相同的部分都用style属性替代了,然后style属性对应的数值就是名为skin_hotspotstyle的style元素。

 

style的优先性

一旦layer或hotspot里面有style属性,则它所调用的style里面包含的属性是无法用静态元素的写法来覆写的。也就是说如果style里包含有scale=“0.5”,那么你在layer或hotspot里scale=“0.6”也是一点作用都没有意义的。

1.19 pr3之后,情况恰恰相反,所调用的style里面包含的属性是可以用静态元素的写法来覆写的。也就是说如果style里包含有scale=“0.5”,那么你在layer或hotspot里scale=“0.6″的话,解析时会按照0.6的缩放比例处理。

如果你要改变style里的属性有什么办法?

第一,你可以单独使用set(),例如set(scale,1);

第二,你可以使用loadstyle这个layer或hotspot自身的action。你可以另外设置一个不同名字的style,然后使用layer[name].loadstyle(style_name)来载入或覆写属性。

参看:style元素官方说明文档

在 “style元素完全解析” 上有 1 条评论

发表评论