0
4

6 に答える 6

0

DOM対応で関数を実行するのを忘れているかもしれませんが（簡略化されたコードとして確実に判断することはできません）、通常はこれで問題なく動作するはずです。

$(function() {
    $('#link').attr('href', $('body.custom-background').css('background-image').replace(/^url\((.*?)\)$/, '$1'));
});
于 2012-04-27T13:41:26.310 に答える
0

参照： http： //jsfiddle.net/p93jx/9/

<!DOCTYPE html>
<html>
<head> 
   <script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>

   <link rel="stylesheet" type="text/css" href="/css/normalize.css">
   <link rel="stylesheet" type="text/css" href="/css/result-light.css">

   <style type='text/css'>
      body { background-image: url('http://localhost:8888/wp-   content/uploads/2012/04/bg2.jpg'); 
      background-repeat: no-repeat; 
      background-position: top center; 
      background-attachment: scroll; }
   </style>

   <script type='text/javascript'>
      $(document).ready(function(){
         var image = $('body').css('background-image');
         image.match(/url\((.*?)\)/);
         document.getElementById('link').setAttribute("href",image);
      });
   </script>
</head>

<body>
   <div id="hide">
      <a id="hidepage">hide page</a>
      <a id="showpage" style="display:none;">show page</a>
   </div>

   <div id="downloadbg">
      <a id="link"><br>Download Background</a>
   </div>

</body>

</html>
于 2012-04-27T13:42:17.103 に答える
0

$（'body'）。css（'background-image'）

jqueryを使用して背景画像の値を取得します（必要な場合）。次に、リンクにhrefを設定する必要があります（これを行っているように見えます）。

あなたがしているようにまっすぐなJavaScriptに従って、背景画像を取得することは次のようになります：

var image = document.getElementsByTagName（ "body"）[0]

var bg = image.style.backgroundImage;

これにより、リンクで設定した値も取得されます

于 2012-04-27T13:39:41.297 に答える
0

これがjQuery以外のメソッドの1つです。

function bgLink(elem, from) {
    if (!elem || !from) {
        return false;
    }
    else {
        var bgLink = window.getComputedStyle(from, null).backgroundImage,
            url = bgLink.substring(bgLink.indexOf('http:')).replace(')', '');
        elem.href = url;
        elem.innerHTML = url;
    }
}

bgLink(document.getElementById('downloadBG'), document.getElementById('bgElem'));​

JSフィドルデモ。

于 2012-04-27T13:43:04.133 に答える
0 
<head>
    <style type="text/css">
        body.custom-background { background-image: url('http://localhost:8888/wp-content/uploads/2012/04/bg2.jpg'); background-repeat: no-repeat; background-position: top center; background-attachment: scroll; }
    </style>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
        var image = $(".custom-background").css('background-image').replace(/^url\((.*?)\)$/,     '$1');
        $('#link').attr("href", image);

    });
    </script>
</head>
<body class="custom-background">
    <div id="hide">
        <a id="hidepage">hide page</a>
        <a id="showpage" style="display:none;">show page</a>
    </div>
    <div id="downloadbg">
        <a id="link"><br>Download Background</a>
    </div>
</body>
​

フィドル

画像を表示するだけでなく、リンクをダウンロードにするには、サーバー側のスクリプトを実行して、ヘッダーContent-Dispositionをattachment!に設定する必要があります。

于 2012-04-27T13:47:10.767 に答える
0

dom 全体がロードされる前に body を参照することはできません。したがって、JavaScript を jQuery 関数でラップする必要があります。 $(function(){ code here!;}); jQuery.ready イベントをリッスンするのと同じ結果が得られます。または、JavaScript コードをページの下部に移動することもできます。

このようなものが仕事をするはずです:

<head>
  <title></title>
    <style type="text/css">
        body{ background: url(@{'http://localhost:8888/wp-content/uploads/2012/04/bg2.jpg'}); }
    </style>

    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>

    <script type="text/javascript">

        $(function(){
            var image = $('body').css('background-image').replace(/^url\((.*?)\)$/,     '$1');;
            $('#link').attr('href', image);
        });


    </script>

</head>
<body>
    <div id="hide">
        <a id="hidepage">hide page</a>
        <a id="showpage" style="display:none;">show page</a>
    </div>

    <div id="downloadbg">
        <a id="link"><br>Download Background</a>
    </div>

</body>
于 2012-04-27T13:55:08.593 に答える