如何使用javascript代码在css中获取a-link（a href）背景图像以调整大小

我绞尽脑汁想弄明白两个问题。一个是图像裁剪，另一个是图像大小调整。以下是我的代码概述：

HTML代码：

<script src="main.js"></script>
<div class="mainDiv">
    <div class="columnDiv1">
        <!-- a div here a div there -->
    </div>
    <div class="columnDiv2">
        <div class="iconDiv1"><a href="/area1/index.html" id="iconDiv1_link">Icon 1</a></div>
        <div class="iconDiv2"><img src="/images/div2Icon.png" id="div2IconImg" width="1" /></div>
    </div>
    <div class="columnDiv3">
        <!-- a div here a div there -->
    </div>
    <div class="bottomRowDiv">
        <!-- a div here a div there -->
    </div>
</div>

注意，这是SharePoint中的网页内容部分，因此为_spBodyOnLoadFunctionNames.push'sizeImageMap'；执行类似于document.onload的操作

因此，我有两个问题：

“iconDiv1”的“columnDiv2”中的图像似乎正在被裁剪。它的尺寸是322像素宽，128像素高。左侧和顶部似乎没有被裁剪，但底部和右侧确实显示，或者更确切地说，没有显示，就好像它们被裁剪一样。我的代码中还有七个图像是以同样的方式处理的，它们没有问题，但这一个似乎有问题。在第一个加载的图像上不明显，但在“悬停”后显示的图像上，可以看到裁剪

我可以得到IMG的宽度和高度，但不能得到a-href链接的背景宽度和高度。这方面的任何指导都会有所帮助。此外，我这样做，以便图像可以调整大小。请注意，链接是id的，而不是类的，因为在加载之前，我无法找到一种简单的方法来访问现有图像的宽度和高度，然后在获取a-href链接后如何调整其大小。如前所述，IMG工作正常，只是A不想合作

---

提前谢谢。

好的，忽略1，因为某种原因，它开始表现得很好。我还记得我能够得到图像，包括IMG和A，宽度和高度。我只是没有任何运气调整链接的背景。A链接将调整大小以裁剪背景图像，但不会裁剪背景图像。我必须找出正确的属性来调整背景图像的大小。我想这就是我来这里的原因。很抱歉问了可能错误的问题，但代码仍然是我目前所拥有的。谢谢。您的HTML中有一个错误：第二行末尾缺少>。但你现在到底有什么问题？A链接将调整大小以裁剪背景图像，但不会裁剪背景图像。听起来有点模糊，如果不是矛盾的话。而且，我这里没有SharePoint，所以如何测试？您说sp调用执行类似于document.onload的操作，但我可以假设它就是这样做的吗？sizeImageMap函数是否在加载时调用？您应该创建一个自包含的示例，它不依赖于人们可能没有的软件，例如JSFIDLE。我试着做一个，但是。。。在Javascript中没有真正的帮助。很抱歉，Lister先生，“…”将意味着更多的数据添加到哈希表中。至于spBodyOnLoadFunctionNames.push…，您可能需要尝试谷歌搜索。这里有一个关于它的博客：[李斯特先生，你如何使用这个叫做JSFIDLE的东西？我在这里没有看到任何关于它的东西，尽管我看到人们在StackOverflow上添加了他们的消息链接。谢谢。

<style type="text/css">

.mainDiv {
    z-index: 2;
    float: left;
    width: 1112px;
    position: relative;
    overflow: hidden;
}

.columnDiv1 {
z-index: 20;
position: absolute;
width: 33.36%;
padding: 0px;
float: left;
border: 0px solid;
}

.columnDiv2 {
    z-index: 20;
    position: absolute;
    width: 30.31%;
    padding: 0px;
    float: left;
    border: 0px solid;
}

.columnDiv3 {
    z-index: 20;
    position: absolute;
    width: 36.33%;
    padding: 0px;
    float: left;
    border: 0px solid;
}

.bottomRowDiv {
    z-index: 20;
    position: absolute;
    width: 100%;
    padding: 0px;
    float: left;
    border: 0px solid;
}


/* stuff in here for columnDiv1 */

.iconDiv1 {
    z-index: 20;
    position: absolute;
    width: 100%;
    left: 0px;
    top: 0px;
    padding-top: 0px;
    padding-left: 0px;
    padding-bottom: 75px;
    padding-right: 0px;
    float: left;
    border: 0px solid;
}

.iconDiv2 {
    z-index: 20;
    position: absolute;
    width: 100%;
    left: 0px;
    top: 0px;
    padding: 0px;
    float: left;
    border: 0px solid;
}

/* stuff in here for columnDiv3 */

/* stuff in here for bottomRowDiv */

#iconDiv1_link {
    display:block;
    text-indent: -10000px;
    background: url(/images/div1.png) no-repeat;
    background-position: center top;
}

#iconDiv1_link:hover {
    background-image: url(/images/div1hover.png);
}

</style>

_spBodyOnLoadFunctionNames.push('sizeImageMap()');

function sizeImageMap()
{

    // get screen information
    var currentScreenWidth =  screen.width;
    var currentScreenHeight = screen.height;

    // get images' information
        //define Image Icon Hash keys
    var imgIconHash = {};
    imgIconHash['image1_link'] = {};
      ...
      ...
    imgIconHash['iconDiv1_link'] = {};
    imgIconHash['div2IconImg'] = {};
      ...
      ...

    for (var imgLinkName in imgIconHash){
        var imgLink = document.getElementById(imgLinkName);
        if (imgLink.nodeName === "A") {

            imgLinkStyle = imgLink.currentStyle || window.getComputedStyle(imgLink, false);
            imgIconHash[imgLinkName]['src']=imgLinkStyle.backgroundImage.replace(/url\((['"])?(.*?)\1\)/gi, '$2').split(',')[0];

        } else if (imgLink.nodeName === "IMG") {

            imgIconHash[imgLinkName]['src']=imgLink.getAttribute('src');

        } else {
            // not A or IMG nodes
        }

        // get image width and height
        var tmpImg = new Image();
        imgIconHash[imgLinkName]['width']=tmpImg.width;
        imgIconHash[imgLinkName]['height']=tmpImg.height;
    }

    // initialize scaling factors
    var imgScale = 1;

    //set scaling factors
    if(currentScreenHeight >= /*given amount*/ ) // set scale
    {

        imgScale = 0.5676; // reset image scale

    } else {

        imgScale = 0.3784; // reset image scale

    }

   //resize images
    for (var imgLinkName in imgIconHash){
        var imgLink = document.getElementById(imgLinkName);
        if (imgLink.nodeName === "A") {

            imgLink.style.background.width = imgIconHash[imgLinkName]['width'] * imgScale + "px";
            imgLink.style.background.height = imgIconHash[imgLinkName]['height'] * imgScale + "px";

        } else if (imgLink.nodeName === "IMG") {

            imgLink.style.width = imgIconHash[imgLinkName]['width'] * imgScale + "px";
            imgLink.style.height = imgIconHash[imgLinkName]['height'] * imgScale + "px";

        }
    }
}