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では大文字と小文字が区別されます。この行は、スタイル全体を小文字にします。大文字のURLも機能しません。

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 に答える