Javascript 获取当前背景图像的URL并移交给<；a href>；_Javascript_Jquery

Javascript 获取当前背景图像的URL并移交给<；a href>；

javascript jquery

Javascript 获取当前背景图像的URL并移交给<；a href>；,javascript,jquery,Javascript,Jquery,我有一个问题到目前为止我还没弄清楚。我在这里搜索了一下，找到了一些答案，但我无法让它发挥作用我想从css中找出当前的背景图像，并创建一个链接来下载该图像这是我迄今为止简化的代码： <style type="text/css"> body.custom-background { background-image: url('http://localhost:8888/wp-content/uploads/2012/04/bg2.jpg'); background-repeat: n

我有一个问题到目前为止我还没弄清楚。我在这里搜索了一下，找到了一些答案，但我无法让它发挥作用

我想从css中找出当前的背景图像，并创建一个链接来下载该图像

这是我迄今为止简化的代码：

<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">

var image = body.custom-background.css('background-image').replace(/^url\((.*?)\)$/,     '$1');
document.getElementById('link').setAttribute("href",image);


</script>

<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.custom-background{背景图像：url（'http://localhost:8888/wp-content/uploads/2012/04/bg2.jpg'）；背景重复：无重复；背景位置：顶部中间；背景附件：滚动；}
var image=body.custom background.css（'background-image'）。替换（/^url\（.*？）$/，'$1'）；
document.getElementById（'link'）.setAttribute（“href”，图像）；
隐藏页
显示页面

下载背景

我对编程相当陌生，我的想法也越来越少了

非常感谢您的帮助。

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

这将使用jquery获取背景图像值（如果您需要），然后您必须在链接中设置href（看起来您正在这样做）

按照直接的javascript操作，获取背景图像将是：

var image=document.getElementsByTagName（“正文”）[0]

var bg=image.style.backgroundImage

这也将得到您在链接中设置的值，您可能忘记在DOM ready上执行您的函数（不能确定是否为简化代码），但通常情况下，这应该可以正常工作

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

见：


正文{背景图像：url（'http://localhost:8888/wp-content/uploads/2012/04/bg2.jpg'）；
背景重复：无重复；
背景位置：上中；
背景附件：滚动；}
$（文档）.ready（函数（）{
var image=$（'body'）.css（'background-image'）；
image.match（/url\（.*？）/）；
document.getElementById（'link'）.setAttribute（“href”，图像）；
});
隐藏页
显示页面

下载背景

这里有一个非jQuery的方法：

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'));


body.custom-background{背景图像：url（'http://localhost:8888/wp-content/uploads/2012/04/bg2.jpg'）；背景重复：无重复；背景位置：顶部中间；背景附件：滚动；}
$（文档）.ready（函数（）{
var image=$（“.custom background”）.css（'background-image'）。替换（/^url\（.*？）$/，'$1'）；
$（'#link'）.attr（“href”，图像）；
});

要使链接成为donwload，而不仅仅是显示图像，您必须执行一些服务器端脚本，将标题内容配置设置为附件
 在加载整个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>


正文{背景：url（@{'http://localhost:8888/wp-content/uploads/2012/04/bg2.jpg'}）；}
$（函数（）{
var image=$（'body'）.css（'background-image'）。替换（/^url\（.*？）$/，'$1'）；；
$（'#link'）.attr（'href'，image）；
});
隐藏页
显示页面

下载背景
生成的链接是什么样子的？工作起来很有魅力！非常感谢！
<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>


<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>