Question

我有以下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

提前感谢大家的帮助！

Answer 1

我认为问题在于这一行：

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

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

为什么要使用此z.js？您可以使用JS设置样式。

element.style.backgroundImage="url('image.png')";

Answer 2

@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编码图像一起改变样式运行时的限制，从而提高网络性能。

如何动态应用base64编码数据uri？

2 个答案: