2

我有以下z.js方法可以将样式动态应用于 DOM 元素，如下所示：

z.Utils.applyStyle(element,'background-image:stamp.gif')

功能在z.Utils.applyStyle这里：

z.Utils.applyStyle = function(elRef,style)
{
  if(typeof(elRef) == 'string')
  {
     elRef = document.getElementById(elRef);
  }
  if(elRef == null || style == null || elRef.style == null)
  {
     return null;
  }
  style=style.replace(/\_/g,'-').toLowerCase();
  var pairs = style.split(";");
  for(var ii =0; ii < pairs.length; ii++)
  {
      var kv = pairs[ii].split(":");
      // trim value
      if(!kv[1])
      {
         continue;
      }
      var value = kv[1].replace(/^\s*/,'').replace(/\s*$/,'');
      var key = "";
      for(var jj = 0; jj < kv[0].length; jj++){
          if(kv[0].charAt(jj) == "-")
          {
             jj++;
             if(jj < kv[0].length)
             {
                key += kv[0].charAt(jj).toUpperCase();
             }
             continue;
          }
          key += kv[0].charAt(jj);
      }
      switch(key)
      {
          case "float":
            key = "cssFloat";
            break;
          case "right":
            key="left";
            value=value-z.Utils.getElementOffset(elRef).width;
            break;
          case "bottom":
            key="top";
            value=value-z.Utils.getElementOffset(elRef).height;
            break;
      }
      try
      {
          elRef.style[key] = value;
      }
      catch(e)
      {
          //some error thrown;
      }
  }
  return true;
};

当我想使用上面的函数将数据 uri 应用为背景图像时该怎么办？就像是：

z.Utils.applyStyle(element,'background-image: url(data:image/gif;base64,[base64-code])');

我用 37K 图像完成了它，但它无法正常工作。
我做错了什么？
可能是，数据 uri 在动态分配中不可用？
可能大 30k+ 大小的 base64 数据是错误的？
有问题的css可以在这里查看：http:
//bookingshare.fw.hu/data_uri_long.css

提前感谢大家的帮助！

4

2 回答 2

0

我认为问题在于这一行：

style=style.replace(/\_/g,'-').toLowerCase();

Base64 区分大小写。此行将使整个样式变为小写。大写的 URLS 也不起作用。

你为什么还要用这个z.js？您可以简单地使用 JS 设置样式。

element.style.backgroundImage="url('image.png')";
于 2012-06-28T02:57:50.897 回答
0

@Sachleen 你是对的。有些。 style.replace(/\_/g,'-').toLowerCase()混淆 base64 解码。但是之后代码不能很好地工作，因为var pairs = style.split(";"); 当我尝试将一堆样式应用于一个元素时，也会在 applyStyle 方法的第 12 行之后混淆 base64 解码，例如

z.Utils.applyStyle(elem,'width:10px;'+
    background:transparent url(data:image/gif;base64,stg...) no-repeat;')

由于";"背景样式声明中存在字符串"url(data:image/gif;base64,"，所以会在其中多出一个数组项"url(data:image/gif"，它本身肯定是没用的，因为它是背景声明的头部，所以样式声明被不必要地拆分，完全丢弃；

z.js 完全由我开发，用于教育目的，以消除使用 DOM 的 javascript 初学者对大小写敏感的混淆。 z.Utils.applyStyle(elem,'Background-Image:url(stamp.gif)')与 z.Utils.applyStyle(elem,'background-Image:url(stamp.gif)')和 等价z.Utils.applyStyle(elem,'background-image:url(stamp.gif)')。由于 css 错误不存在运行时，我发现与我的学生合作时这很有用。

无论如何，谢谢，让我专注于更改样式运行时以及 base64 编码图像的限制，这会带来更好的网络性能。

于 2012-06-29T21:52:54.453 回答