Question

这是我的麻烦。

我正在使用插件进行灯箱。由于某种原因，其中一个div太短了28px。我已经全神贯注地寻找解决方案，但似乎没有人遇到同样的问题。

我提出的解决方案是找到该元素（我有）并创建一个javascript片段，它将添加＆＃34; 28＆＃34;到现有号码。高度和宽度直接在div上计算，而不是在样式表中的元素中计算。

示例：

<div id="colorbox" class="" style="padding-bottom: 57px; padding-right: 28px; position: absolute; width: 892px; height: 602px; top: 2234px; left: 500px;">

我希望Javascript代码在宽度上添加28像素，在高度上添加55px。

我将如何做到这一点？

我想说我不是在寻找答案;如果你能向我解释一下，那就太好了。非常感谢，伙计们！

编辑：这就是我调用JQuery的方式

此外，您可以在此处查看包含图库的页面：http://olsencustomhomes.com.previewdns.com/designs/verona-2/#gallery

为克里斯编辑：

这是正确的代码吗？它在我的标题中

<script>



 $(document).ready(function() {
        function changeSize(){
          var colorbox   = $("#colorbox");
          var initWidth  = $("#colorbox").outerWidth();  // get colorbox width
          var initHeight = $("#colorbox").outerHeight(); // get colorbox height


          var newWidth   = 28; // set your desired width
          var newHeight  = 55; // set your desired height
          var height     = initHeight + newHeight; // add heights together
          var width      = initWidth + newWidth;   // add widths together


          colorbox.css({"height" : height, "width": width});

      }

      $(document).ajaxStop(function() {
         changeSize();
      });
  });

</script>

Answer 1

如果要动态添加高度和宽度。这样的事情应该有效：

function changeSize(){
    var colorbox   = $("#colorbox");
    var initWidth  = $("#colorbox").outerWidth();  // get colorbox width
    var initHeight = $("#colorbox").outerHeight(); // get colorbox height


    var newWidth   = 28; // set your desired width
    var newHeight  = 55; // set your desired height
    var height     = initHeight + newHeight; // add heights together
    var width      = initWidth + newWidth;   // add widths together


    colorbox.css({"height" : height, "width": width});

}changeSize();

此外，如果您想确保在彩盒打开后您的代码可以使用.ajaxStop();另请注意，outerWidht()和outerHeight()将获得颜色框宽度以及填充和边框。

在ajax事件结束后触发函数：

$(document).ajaxStop(function() {
  changeSize();
});

<强>更新

好吧，看起来这个功能最初会触发。您可以看到width为null，因为颜色框尚未打开。你想要做的是在彩色盒打开后触发该功能。这就是ajaxStop()将发挥作用的地方。但使用colorbox callback function：

实际上可能更好

enter image description here

但不是在彩盒打开之后。所以尝试采用ajaxStop()方法。另请注意，如果您这样做，则需要在功能changeSize();之后删除changeSize()例如：

$(document).ready(function() {
    function changeSize(){
      // function stuff
    }

    $(document).ajaxStop(function() {
      changeSize();
    });
});

或者，Colorbox OnComplete：

$(".selector").colorbox({
    onComplete:function(){
      changeSize();
    }
});

更新2：

我不确定你在哪里准确地调用彩盒。但我看到你有这个：Found here

jQuery(function($){
    $('#wpsimplegallery a').colorbox({
        maxWidth: '85%',
        maxHeight: '85%'
    });
});

请尝试：

   jQuery(function($){
        $('#wpsimplegallery a').colorbox({
            maxWidth: '85%',
            maxHeight: '85%',
            onComplete:function(){
                changeSize();
            }
        });
    });

Answer 2

非常直接的jQuery应用程序，但无论如何我都为你评论过：

//select the box element using jQuery
var box = $('#colorbox');

//get the current width and height
var curWidth = box.width();
var curHeight = box.height();

//set the width and height with modified values
box.width(curWidth + 28);
box.height(curHeight + 55);

小提琴：http://jsfiddle.net/579s2/

使用Javascript向现有CSS元素添加像素

2 个答案: